아주 쉬운 CSS - Flex

Flex에 대해 알아보자!

Flex

자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성

Flex 속성 종류

grow
shrink
basis
direction
wrap
flow

---

flex

flex 속성 자체는 flex-grow, flex-shrink, flex-basis의 단축 속성이다.

.div {
display: flex;
flex: 1 1 100px;
}

• flex를 사용하기 위해선 display: flex를 부모 영역에 선언해줘야 한다.

 

grow

할당 가능한 공간의 정도

.div {
flex-grow: 0;
}

• 형제 아이템들이 모두 동일한 flex-grow 값 = 동일한 공간
• 형제 아이템들이 다른 flex-grow 값 = 다른 공간

 

shrink

설정된 값에 따라 크기가 축소(아이템의 크기가 container보다 클 때 사용)

.div {
flex-shrink: 1;
}

flex-shrink: 0 = 줄어들지 않겠다.

 

basis

아이템의 초기 크기

.div {
flex-basis: auto;
}

• auto가 아닌 flext-basis와 width(or height) 중 flex-basis가 우선

 

direction

플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향 지정

.div {
  display: flex;
  flex-direction: row;    /* row, row-reverse, column, column-reverse */
}

 

wrap

flex-item 요소들이 강제로 한 줄에 배치되도록 할 것 인지 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현할 것인지 결정

.div { 
  flex-wrap: nowrap;    /* no-wrap, wrap, wrap-reverse */ 
}

 

flow

flex-direction, flex-wrap의 단축 속성

.div {
  flex-flow: row wrap;    /* column-reverse nowrap 등 여러 요소를 한 번에 쓸 수 있다. */
}

---

정렬

justify-content

align-items

 

justify- content

메인축 방향으로 아이템들을 정렬

 

align-items

수직축 방향으로 아이템들을 정렬

 

flex-start: 아이템들을 시작점 정렬

flex-end: 아이템들을 끝점 정렬

center: 아이템들을 가운데 정렬

space-between: 아이템들 사이에 균일한 간격

space-around: 아이템들의 둘레에 균일한 간격

space-evenly: 아이템들의 가이와 양 끝에 균일한 간격