[CSS FlexBox] Align, Justify

CSS 복습

React native(typescript 이용)로 앱 프로토타입을 만드는 중 매번 헷갈리는 내용이 있어서 정리.

Align vs Justify

Align

• Align이 들어간 css는 flex 축에 수직으로 적용된다.
• 즉 flow-direction이 row라면 Align은 column방향으로 정렬함.

Justify

• Justify가 들어간 정렬은 flex 축에 평행하게 적용됨.
• 매우 강추하는 flexboxfroggy (연습용 예제 사이트)

Flexbox Froggy

*-content > *-items >  *-self

• align-content determines the spacing between lines
  • flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
  • flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
  • center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
  • space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
  • space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
  • stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
• align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect
• align-self는 align-items로 받은 인자 값을 무시하고, 하나의 요소에만 적용된다. 인자는 align-items와 같은 종류를 받음.

Item

• single line 즉 하나의 컨테이너 내에서만 적용

Content

• Flex의 요소들에 적용. 여러개의 컨테이너의 간격, 배치 조절.

order

• order 속성을 통해 flex박스의 순서를 바꿔줄 수 있다.

flex-wrap

• flex 요소들을 한 줄 또는 여러 줄에 걸쳐서 정렬하는 속성
• nowrap: 한 줄에 정렬
• wrap: 여러 줄
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬.

flex-direction + flex-wrap = flex-flow

• flex-flow: column wrap;은 flex-direction: column; flex-wrap= wrap; 과 동등