Flex
- Flex(또는 Flex)는 레이아웃 배치를 위해 고안된 CSS 속성으로, flex container와 그 하위 항목인 flex items으로 구성된다.
- flexbox에는 main axis(주축)와 cross axis(주축에 수직인 축) 두개의 축이 있으며, 축의 방향은 flex-direction 속성을 이용해 결정할 수 있다.
Flex 컨테이너에 적용하는 속성들
display: flex;
.container {
display: flex;
}flex 아이템들을 가로 방향, 자신이 가진 컨텐츠의 width만큼만 차지하도록 배치한다.
flex-direction
- flex-direction 속성은 flex-container 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다.
/* 기본값. main 축의 방향을 가로로 */
flex-direction: row;
/* <row>처럼, 대신 역방향 */
flex-direction: row-reverse;
/* main 축의 방향을 세로로 */
flex-direction: column;
/* <column>처럼, 대신 역방향 */
flex-direction: column-reverse;
flex-wrap
컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할 지 결정
.container {
flex-wrap: nowrap; /* 기본값 */
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
}- nowrap
- 아이템들이 모두 메인축의 같은 줄에 있게 해줌.(크기가 바뀌더라도)
- 줄바꿈 ㄴㄴ
- wrap
- 아이템의 크기를 유지 해줌. 줄이 바뀌더라도
- 줄바꿈 ㅇㅇ
- wrap-reverse
- 줄바꿈을 하는데 아이템을 역순으로 배치
flex-flow
- flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성
- flex-direction, flex-wrap의 순으로 한 칸 떼고 써줌.
.container {
flex-flow: row wrap;
/* 아래의 두 줄을 줄여 쓴 것 */
/* flex-direction: row; */
/* flex-wrap: wrap; */
}justify-content
메인 축(main axis) 방향으로 아이템을 정렬할 때 사용
.container {
justify-content: flex-start;
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
}align-items
수직 축(cross axis) 방향으로 아이템을 정렬할 때 사용
.container {
align-items: stretch;
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
/* align-items: baseline; */
}align-content
수직 축(cross axis) 방향으로 여러줄 사이의 간격을 지정
.container {
align-content: flex-start /*여러 줄들을 컨테이너의 꼭대기에 정렬*/
align-content: flex-end /*여러 줄들을 컨테이너의 바닥에 정렬*/
align-content: center /*여러 줄들을 세로선 상의 가운데에 정렬*/
align-content: space-between /*여러 줄들 사이에 동일한 간격을 둠*/
align-content: space-around /*여러 줄들 주위에 동일한 간격을 둠*/
align-content: stretch /*여러 줄들을 컨테이너에 맞도록 늘림*/
}Flex 아이템에 적용하는 속성들
flex-basis
- Flex 아이템의 기본 크기를 설정(flex-direction이 row일 때는 너비, column일 때는 높이)
- 찌그러지거나 늘어나기 전의 값. 실제 크기는 아님 ➡️ flex-grow와 flex-shrink에 의해 바뀜
- 기본값은 auto이며, width 속성에서 사용하는 모든 단위(px, %, em, rem 등)를 속성값에 사용할 수 있다.
- flex-basis 속성의 값을 auto로 설정하면 flex item은 상대적 flex item(relative flex item)이 되어 콘텐츠의 크기를 기준으로 크기가 결정된다.
- auto와 함께 자주 사용하는 속성값이0이다. flex-basis 속성의 값을 0으로 설정하면 flex item은 절대적 flex item(absolute flex item)이 되어 flex container를 기준으로 크기가 결정된다.
- width, height가 대체할 수 있기 때문에 잘 사용안함
align-self
- 수직축으로 아이템 정렬
- align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬 (동일한 값 가짐)
order
- 각 아이템들의 나열 순서를 결정하는 속성
- html을 직접 바꾸지 않고 순서를 바꿀 수 있기 때문에 유용
- 디폴트 값은 0이며, 작은 순서일수록 먼저 배치
flex-grow
- flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성
- 기본값은 0이고, 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커져 빈 공간을 메우게 됨
- 반응형 디자인 짤 때 매우 유용
- box 여러개가 flex-grow값을 가지면 경쟁 ➡️ 비율에 맞게 커짐
.item {
flex-grow: 1;
/* flex-grow: 0; */ /* 기본값 */
}flex-shrink
- flex-shrink는 flexbox가 쥐어짜질때 아이템의 행동을 정함
- 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정
- 기본값은 1이고, 1보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 flex-basis보다 작아짐
- 값이 2이면 ➡️ 1인 것보다 두배로 찌그러짐
- 모든 박스가 같은 크기로 찌그러지게 하고 싶지 않을 때 유용!
flex
- 순서대로 flex-grow, flex-shrink, flex-basis를 한 줄에 나타낼 수 있다.
flex: 0 1 auto;참고
- width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됨
- 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않는다.
- (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있다.
flexbox 속성들을 연습할 수 있는 게임
➡️ https://flexboxfroggy.com/#ko
