[CSS] Flex 개념 정리

Flex (Flexible Box)

요소의 크기가 불분명하거나 동적인 경우에도 각 요소를 정렬할 수 있는 효율적인 방법을 제공하는 레이아웃 방식

수평/수직 정렬에 관련된 속성

 

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

 

위와 같은 div item들이 있을 때 수평 정렬을 하는 방법에는 여러가지가 있다. 

1. display : inline-block 사용하기

2. display : block , float : left 사용하기

하지만 두 방법 모두 복잡한 레이아웃에서는 구현이 어렵고 한계점이 발생하기도 한다.

 

레이아웃을 간결하고 쉽게 구현할 수 있도록 CSS3에 추가된 Flex 라는 레이아웃 방식을 사용해보자.

 

 

그냥 item을 감싸는 container에 display : flex 를 적용해주면 아주 쉽게 수평 정렬이 가능하다.

 

 

 

---

 

 

Flex 

1. Container : Items을 감싸는 부모 요소
2. Items 

item 정렬을 위해서는 container가 필수!

 

---

 

Flex Container 의 속성들

• display 
• flex-flow
• flex-direction
• flex-wrap
• justify-content
• align-content
• align-items

 

flex-flow (단축 속성)

• flex Items의 주 축을 설정하고 Items의 여러 줄 묶음 (줄 바꿈)을 설정한다.
• flex-direction 과 flex-wrap 을 단축한 속성이다.

 

flex-flow : [flex-direction] [flex-wrap];

 

flex-direction

Items의 주 축을 설정한다.

flex-direction : row / row-reverse

flex-direction : column / column-reverse

• row : Items를 수평축으로 왼쪽 -> 오른쪽 표시 (기본 값)
• row-reverse : 수평축으로 오른쪽 -> 왼쪽 표시
• column : Items를 수직축으로 위->아래 표시
• column-reverse : 수직축으로 아래->위 표시

 

• 주 축 (main-axis) 과 수평 축 (cross-axis)
  
  • row : Items를 수평 축으로 표시하기 때문에 주 축은 수평 , 교차 축은 수직
  • column : Items를 수직 축으로 표시하기 때문에 주 축은 수직 , 교차 축은 수평

시작 점 , 끝점

 

flex-wrap

Items의 여러 줄 묶음을 설정한다. (줄 묶음을 할지 말지 결정)

 

flex-wrap : nowrap (container의 너비에 맞춰 한 줄 안에서 Items의 크기만 가변 된다.)

flex-wrap : wrap (container의 너비에 맞춰 줄바꿈 된다.)

flex-wrap : wrap-reverse (아래에서 위로 , 왼쪽에서 오른쪽으로)

• nowrap : 모든 Items을 한줄로 표시 (기본 값)
• wrap : Items을 여러 줄로 묶음
• wrap-reverse : Items을 wrap의 역방향으로 여러 줄로 묶음

 

크기가 가변하는 이유?

.container {
  border: 4px solid;
  display: flex;
}

.container .item {
  width : 150px;
  height : 100px;
  background:tomato;
  border: 4px dashed red;
  border-radius : 10px;
}

 

위와 같이 flex-wrap이 기본값인 nowrap 인 상태에서 container의 크기를 줄였다 늘렸다하면 Item들의 너비를 150px로 설정했음에도 불구하고 너비가 줄어든다.

이유는 Item들이 container의 크기에 따라 맞춰지는데 이는 각각의 item들이 flex-basis라는 속성에서 auto를 기본 값으로 가지기 때문에 가로/세로 값이 가변하게 되는 것이다. 

 

justify-content

주 축의 정렬 방법을 설정한다.

 

justify-content : flex-start (시작점 정렬) , flex-end (끝점 정렬)

justify-content : center (가운데 정렬)

justify-content : space-between (시작/마지막 점에 정리 후 남은 Items 균등하게 정렬) , space-around (각 Item을 균등한 여백으로 정렬)

• flex-start : Items을 시작점으로 정렬 (왼쪽 정렬)
• flex-end : Items을 끝점으로 정렬 (오른쪽 정렬)
• center : Items을 가운데 정렬
• space-between : 시작 Item은 시작점에 정렬하고 마지막 Item은 끝점에 정렬한 뒤, 나머지 Items는 사이에서 고르게 분배되어 정렬
• space-around : 각 Items을 균등한 여백을 포함하여 정렬

 

 

align-content

교차 축의 정렬 방법을 설정한다.

* flex-wrap 속성을 통해 items가 여러 줄이고 여백이 있을 경우에만 사용 가능!

 

item의 height : auto로 해야 늘어난다!

flex-start / flex-end

center / space-between / space-around

• stretch : Container의 교차 축을 채우기 위해 Items 늘림
• flex-start : Items을 시작점으로 정렬
• flex-end : Items을 끝점으로 정렬
• center : Items을 가운데 정렬
• space-between : 시작 Item은 시작점에 정렬하고 마지막 Item은 끝점에 정렬한 뒤, 나머지 Items는 사이에서 고르게 분배되어 정렬
• space-around : 각 Items을 균등한 여백을 포함하여 정렬

 

 

 

align-items

교차 축에서 Items의 정렬 방법을 설정한다. Items가 한 줄일 경우 사용한다.

 

stretch

flex-start / flex-end

center / baseline

• stretch : container의 교차 축을 채우기 위해 Items을 늘림
• flex-start : Items을 각 줄의 시작점으로 정렬
• flex-end : Items을 각 줄의 끝 점으로 연결
• center : Items을 가운데 정렬
• baseline : Items을 문자 기준선에 정렬

 

 

---

Flex Container 의 속성들

• order
• flex
• flex-grow
• flex-shrink
• flex-basis
• align-self

 

order

Flex Item의 순서를 설정한다. 숫자가 클 수록 순서가 밀리고 음수를 허용한다.

 

.item3 {
  order: 1;
}

.item5 {
  order: 7;
}

.item6 {
  order: -1;
}

 

 

flex (단축 속성)

• Item의 너비를 설정하는 단축속성이다.
• Item의 증가 너비 비율 / 감소 너비 비율 / 기본 너비를 설정한다.
  • flex 라는 단축 속성에서 flex-basis를 생략할 경우, flex-basis의 기본 값은 auto가 아니라 0이다. 

flex : [flex-grow] [flex-shrink] [flex-basis]

 

flex-grow 

Item의 증가 너비 비율을 설정한다. 숫자가 클 수록 많은 너비를 가진다.

 

item 자체의 너비 : 100px , 1과 2에 각각 flex-grow : 1 , flex-grow : 2

item 자체의 너비를 100px로 설정해두어서 1과 2의 너비가 정확히 2배 차이가 나지는 않는다.

item의 width를 지우고 3에만 100px 너비를 설정해주면 다음과 같이 1과 2의 너비 비율이 1:2로 정확해진다.

item 자체의 높이 지우고 i3에 width : 100

 

 

flex-grow 가 유용하게 사용될 예제)

 

 

item2는 width : 100px로 고정되어있고 item1은 flex-grow : 1 로 설정되어있다.

1번 부분의 가로 너비만 가변적으로 변하고 2번은 변하지 않기 때문에 이와 관련된 예제를 만들 때 flex-grow가 유용하게 사용딜 수 있다.

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
</div>

.container {
  border: 4px solid;
  display: flex;
}

.container .item {
  height : 100px;
  background:tomato;
  border: 4px dashed red;
  border-radius : 10px;
  font-size:30px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.item1 {
  flex-grow:1;
}

.item2 {
  width:100px;
}

 

 

flex-shrink

Item이 감소하는 너비의 비율을 설정한다. 숫자가 크면 더 많은 너비가 감소한다.

Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다.

 

flex-shrink는 요소의 너비에 영향을 받아서 계산이 까다롭다.

* 요소의 너비 : width, height, flex-basis 등 너비가 지정된 경우

 

왼쪽 예제에서 container의 너비가 줄어들어서 Item의 너비에 영향을 주기 시작한 시점부터 실제 줄어든 거리가 90px일 때,

요소 너비가 200px로 같은 Item이 2개이고 지정된 감소 너비 (flex-shrink)가 각각 2와 1이라면, 감소 너비는 2:1이다.

 

첫번째 Item은 90px * 2/3 = 60px 만큼 감소하고, 두번째 Item은 90px * 1/3 = 30px 만큼 감소한다. 

 

 

flex-basis 

Item의 기본 너비를 설정한다. 값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있다.

 

 

align-self

교차 축에서 개별 Item의 정렬 방법을 설정한다.

 

align-items 의 경우는 container 내의 모든 items의 정렬 방법을 설정한다.

이때, 개별 item의 정렬 방법을 변경하고 싶을 경우에는 해당 item에서 align-self 속성을 사용하면 된다.

 

container의 align-items를 flex-end로 설정하고 몇개의 item에 대해서만 교차축에서 정렬 방법을 바꾸어보자.

• 2번 : align-self : center;
• 4번 : align-self : flex-start;
• 7번 : align-self : stretch; height : auto;