css flex (2)

컨테이너 속성

display: flex와 display: inline-flex 차이

• flex는 block 같은 수직 구조, inline-flex는 수평 구조. (아이템이 아닌 컨테이너 구조)

flex-flow

• flex-direction과 flex-wrap의 단축 속성
• 기본값: flex-flow: row nowrap;

justify-content

• 주 축(main-axis)에서의 정렬 방법
  • 즉, flex-direction: row이면 수평 정렬column이면 수직 정렬

align-items

• 교차 축에서(cross-axis)에서의 정렬 방법
  • 교차 축은 주 축과 수직을 이루는 축
• default는 stretch(여백 채우기)
• baseline은 문자 기준선에 정렬

 

item 속성

order

• 숫자로 item의 순서 설정(숫자가 클수록 뒤에 온다) order: 1; 형식
• 음수도 가능

align-self

• 교차 축에서 개별 item의 정렬 방법 설정
  • 기본 값은 align-items의 값을 상속
• 일부 item을 따로 정렬해야 할 경우에 사용

---

참고:
https://heropy.blog/2018/11/24/css-flexible-box/
https://poiemaweb.com/css3-flexbox