[CSS] justify-content: end vs flex-end

• justify-content: end vs flex-end
  • end는 CSS Box Alignment Specification에 정의돼 있다.
  • flex-end는 Flex-box Specification에 정의돼 있다.
  • flex box 속성은 알겠는데 CSS Box Alignment가 뭔지 모르겠어서 찾아보니 CSS 에 존재하는 여러 디스플레이 모델들(flex, grid, block 등)에 공통적으로 적용되게 하려고 만든 속성이라고 한다.
  • 아직 working draft 상태(2022.01.24 기준)이므로 유효하게 적용되지 않는 브라우저가 존재할 수 있다.
  • 플렉스 컨테이너에서 justify-content: end를 사용했더니, 특정 환경의 크롬에서는 적용돼지 않았다.
  • 지원 스펙을 찾아보니(https://caniuse.com/mdn-css_properties_justify-content_flex_context_start_end) 크롬 93버전 이상부터 지원하는데, 적용이 안된 크롬의 버전은 90이었다.

Ref

https://stackoverflow.com/questions/9853497/any-difference-between-chrome-on-mac-and-chrome-on-windows