[CSS] Flex

Flexbox란?

flexbox는 CSS3의 새로운 레이아웃 방식으로 효율적인 요소의 배치, 정렬, 분산할 수 있는 방법을 제공합니다.

flexbox의 구성

flexbox는 상위 부모요소인 flex container과 하위 자식요소인 flex item으로 나뉩니다.

flexbox는 아래와 같은 코드로 만들 수 있습니다.
그리고 display 속성으로 flex container를 정의합니다.
display: block;, display: inline-block 이 아닌 display: flex, display: inline-flex으로 정의합니다.

.flex_container1{
	display: flex;
 }
 .flex_container2{
	display: inline-flex;
 }

---

부모요소(flex container)와 자식요소(flex item)

flex container과 item들의 속성은 다음과 같습니다.

flex container 속성: flex-direction, flex-wrap, justify-content, align-items, align-content

flex item 속성: flex, flex-grow, flex-shrink, flex-basis, order

---

flex container

flex-direction

flex item들은 주축(가로축)에 따라 정렬되는데, flex-direction 속성으로 결정합니다.
기본 default값은 row인데, 왼쪽에서 오른쪽 방향으로, column은 위에서 아래의 방향으로 흐르게 합니다. reverse는 역순으로 흐르게 합니다.

flex-wrap

flex-wrap은 item들의 줄 묶음 혹은 줄 바꿈을 설정합니다.

Items를 줄 바꿈 하려면 값으로 wrap을 사용해야 합니다.

justify-content

주 축(main-axis)의 정렬 방법을 설정합니다.

.flex_container {
  display: flex;
  justify-content: center;
}

값	의미
flex-start	Container안에 있는 Item들을 왼쪽으로 정렬함 (기본값)
flex-end	Container안에 있는 Item들을 오른쪽으로 정렬함
center	Container안에 있는 Item들을 수평방향의 중앙에 정렬함
space-between	Container안에 있는 Item들을 일단 양쪽끝에 붙히고 나머지 Item들을 일정간격으로 정렬함
space-around	Container안에 있는 Item들을 좌우 각각 일정간격으로 정렬함
space-evenly	Container안에 있는 Item들과 양 끝을 균일한 간격을 만들어 줌

align-items

교차 축(cross-axis)에서 Items의 정렬 방법을 설정합니다.

.flex_container {
  display: flex;
  align-items: center;
}

값	의미
flex-start	Container안에 있는 Item들을 상단에 정렬함 (기본값)
flex-end	Container안에 있는 Item들을 하단에 정렬함
center	Container안에 있는 Item들을 수직방향의 중앙에 정렬함
stretch	Container안에 있는 Item들을 높이와 동일하게 위아래로 늘려 정렬
baseline	Container안에 있는 Item들을 baseline으로 정렬함

align-content

Container안에 있는 Item들이 여러 줄로 표시될 때 수직방향으로 정렬하는 방법을 설정합니다.

값	의미
flex-start	Container안에 있는 Item들을 상단에 정렬함 (기본값)
flex-end	Container안에 있는 Item들을 하단에 정렬함
center	Container안에 있는 Item들을 수직방향의 중앙에 정렬함
stretch	Container안에 있는 Item들의 줄 높이를 균일한 간격으로 늘려 정렬
space-between	een Container안에 있는 Item들의 줄을 일단 상단과 하단 끝에 붙히고 나머지 Item들을 일정간격으로 수직방향으로 정렬함

---

flex-item

flex-grow

각 item의 넓이를 배수로 지정합니다.

.container .item-1 { flex-grow: 1; }
.container .item-2 { flex-grow: 3; }
.container .item-3 { flex-grow: 1; }

item-2는 item-1과 item-3에 비해 3배의 배수로 크기가 3배 크게 됩니다.

flex-shrink

flex-grow와 반대로 각 Item의 넓이가 배수로 쪼그라듭니다.

.container .item-1 { flex-shrink: 1; }
.container .item-2 { flex-shrink: 1; }
.container .item-3 { flex-shrink: 2; }

item-3은 item-1과 item-2에 비해 2배 줄어들며, 만약 flex-shrink가 0의 값을 갖게 된다면 (고정되어) 줄어들지 않습니다. 음수의 값을 사용할 수 없습니다.

flex-basis

Item의 기본 크기값을 지정합니다.

.item-1 { flex-basis: 200px; }

flex

flex-grow와 flex-shrink, flex-basis를 flex로 한 줄에 지정할 수 있습니다

.container .item-1 { flex: 0 1 100px; }

첫번째 요소는 flex-grow, 두번째 요소는 flex-shrink, 세번째 요소는 flex-basis입니다.

.container .item-1 { flex: 0 1 auto }

기본값은 flex: 0 1 auto입니다.

order

Container 안에서 Item의 순서를 정합니다. 음수값도 사용가능하며 왼쪽에서 오른쪽의 순서로 order: number의 number가 작으면 왼쪽으로, 클수록 오른쪽으로 배치됩니다.

.container .item-1 { order: -1; }
.container .item-2 { order: 0; }
.container .item-3 { order: 1; }
.container .item-4 { order: 2; }

---

참조한 사이트

widgetcore