CSS flexbox

💊 Flexbox

css에서 강력한 정렬기능을 제공하기 위해 고안되었다.
두 개의 축에 대해 명확히 이해해야 정확히 다룰 수 있다.

💊 flexbox 사용방법

container {
  display: flex; /* flexbox 선언 */
  flex-direction : row /* 가로, 세로 방향 지정 (주축 정의)
  row | row-reverse | column | column-reverse */
  flex-wrap: nowrap /* 무조건 한줄 or 줄바꿈 지정
  nowrap | wrap */
}

• nowrap : 부모 박스 사이즈에 맞춰서 강제로 자식 요소 사이즈를 줄여서라도 무조건 한줄로 정렬됨.

💊 flexbox 두개의 축

🔎 main axis

: flex-direction 으로 지정된 메인 축

• justify-content: 해당 속성 지정 시 주축에 대해 정렬 가능

🔎 cross axis

: flex-direction 으로 지정된 메인 축의 교차(수직)축

• align-items: 교차(수직)축에 대해 flex 요소 정렬
• align-content : 교차(수직)축에 flex 라인 사이의 공간 제어, 두줄 이상으로 이루어진 flex 컨테이너에 사용

참고

김버그의 html/css는 재밌다.
MDN