Flexbox 정리

Flexbox의 구성

• container
• item

---

container

• display
  • flex : container에 display의 속성, flex 값을 주어야 flexbox 기능이 적용된다.
• flex-direction
  • row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
  • row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
  • column: 요소들을 위에서 아래로 정렬합니다.
  • column-reverse: 요소들을 아래에서 위로 정렬합니다.
• flex-wrap
  • nowrap (default)
  • wrap
  • wrap-reverse
• flex-flow
  • 다음의 속성들을 간략히 한 속성입니다. flex-direction and flex-wrap.
  • <flex-direction> <flex-wrap>
• justify-content
  • flex-start (default) : 요소들을 컨테이너의 왼쪽으로 정렬합니다.
  • flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
  • center: 요소들을 컨테이너의 가운데로 정렬합니다.
  • space-between: 요소들 사이에 동일한 간격을 둡니다.
  • space-around: 요소들 주위에 동일한 간격을 둡니다.
• align-items
  • flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
  • flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
  • center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
  • baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
  • stretch (default) : 요소들을 컨테이너에 맞도록 늘립니다.
• align-content
  • 세로선 상에 여분의 공간이 있는 경우 Flex 컨테이너 사이의 간격을 조절합니다.
  • flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
  • flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
  • center: 요소들을 컨테이너의 가운데로 정렬합니다.
  • space-between: 요소들 사이에 동일한 간격을 둡니다.
  • space-around: 요소들 주위에 동일한 간격을 둡니다.
  • space-evenly (FireFox only): 첫 번째로 오는 정렬 대상 전에 두 개의 인접한 정렬 대상 사이의 간격과 마지막 정렬 대상 이후의 간격이 같도록 항목이 분산됩니다.
  • stretch (default): 컨테이너에 맞게 늘립니다.

item

• order
  • order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다.
• flex-grow
  • 남는 행 여백을 분배해서 채우는 방법
  • container의 공간을 할당받습니다.
  • 값(소수점 가능)을 입력하면 그 비율에 맞추어 컨테이너 공간을 할당합니다.
• flex-shrink
  • 레이아웃을 벗어난 아이템 너비를 분배해서 줄이는 방법
• flex
  • 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다.
  • flex는 flex-grow, flex-shrink, flex-basis의 단축 속성입니다.
  • ex) flex : 1 1 100px;
• align-self
  • 지정된 align-items 값을 무시하고 Flex 요소를 세로선 상에서 정렬합니다.
  • 그리드 또는 플렉스 항목의 값을 재정의 한다.
  • stretch : auto 크기 아이템이 십자형 축을 따라 정렬 용기에 정확히 채워진다.
  • center : 아이템의 마진 박스는 크로스 축의 라인 내에서 중심에 위치한다.
  • self-start : 교차축에서 항목의 시작 측에 해당하는 정렬 용기의 가장자리와 같은 높이로 항목을 정렬한다.
  • flex-start : 교차축에서 항목의 끝면에 해당하는 정렬 요기의 가장자리와 같은 높이로 항목을 정렬한다.
  • self-end : 플렉스 항목의 크로스 스타트 마진 가장자리는 라인의 크로스 스타트 가장자리로 플러시 된다.
  • flex-end : 플렉스 항목의 크로스 엔드 마진 가장자리는 라인의 크로스 엔드 가장자리로 플러시 된다.

---

Flexbox에는 중심축과 반대 축이 존재합니다.

수직과 수평이 있다고 가정하면 수직이 중심축이 되면 수평축은 반대축이 됩니다.

출처:

드림코딩 아카데미 → http://academy.dream-coding.com/

드림코딩 유튜브 → http://www.youtube.com/c/드림코딩by엘리