css 기초 - Flexbox 🎉 — 니코딩코딩 📚

728x90

지금까지 마크업 하면서 박스 배치를 float를 사용해서 했었는데 Flexbox라는 편리한 속성이 있어서 정리해봅니다 ㅎㅎ

많은 분들이 마크업을 할 때 주로 float를 이용해서 배치를 하는데 원래 float는 이미지와 텍스트를 배치하기 위한 속성입니다.

이번에 포스팅할 Flexbox는 아이템 배치에 가장 적합한 속성이니까 배워두면 유용하게 써먹을 수 있을 것 같습니다.

1. Flexbox란??

flexbox는 container와 item을 배치할 수 있는 속성이 나누어져 있고 중심축과 반대축을 기준으로 아이템을 배치합니다.

중심축과 반대축은 속성에 따라서 달라질 수 있다는 걸 기억하고 보시면 더 이해가 잘 될 거예요

2. Flexbox 속성

🔥 container 속성

1. display:flex

-> 해당 컨테이너를 flexbox로 지정 (아이템들이 가로로 배치)

2. flex-direction: row, row-reverse, column, column-reverse

- 중심축을 정하는 속성으로 row는 가로배치, column은 세로 배치를 지정함

- 중심축을 row로 정하면 반대 축은 자동으로 column이 됨

- reverse 속성들은 첫 번째 요소가 마지막 위치에 배치됨

3. flex-wrap: nowrap, wrap, wrap-reverse

- 아이템들이 한 줄에 꽉 찼을 때 자동으로 다음 줄로 정렬해주는 속성

- nowrap: 꽉 차도 한 줄에 전부 배치

- wrap: 꽉 차면 다음 줄에 배치

- wrap-reverse: 아래부터 차례대로 배치

4. flex-flow: flex-direction flex-wrap의 축약형

- flex-flow: row-reverse wrap-reverse와 같은 형식으로 사용

5. justify-content: flex-start, flex-end, center, space-around, space-evenly, space-between

- 중심축을 기준으로 아이템들을 배치하는 속성

- flex-start: 왼쪽부터 순서대로 배치

- flex-end: 오른쪽부터 순서대로 배치 (row-reverse와 다르게 첫 번째 요소가 맨 앞에 위치함)

- center: 가운데 정렬

- space-around: 맨 처음과 마지막 요소의 간격을 제외한 나머지 아이템들을 동일한 간격으로 배치

- space-evenly: 모든 아이템들을 동일한 간격으로 배치

- space-between: 맨 처음과 마지막 요소는 붙이고 나머지 아이템들을 동일한 간격으로 배치

6. align-items: flex-start, flex-end, center, baseline

- 반대 축을 기준으로 아이템들을 배치하는 속성

- baseline: 텍스트를 기준으로 아이템들을 배치하는 속성

7. align-content: flex-start, flex-end, center, space-around, space-evenly, space-between

- 반대 축을 기준으로 아이템들을 배치하는 속성

- 속성 값들이 justify-content와 동일함

🔥 item 속성

1. order: 0, 숫자

- 아이템들의 배치 순서를 지정하는 속성

2. flex-grow: 숫자

- 컨테이너 크기가 커질 때 어떻게 늘어나야 할지를 지정하는 속성

3. flex-shrink: 숫자

- 컨테이너 크기가 작아질 때 어떻게 줄어들어야 할지를 지정하는 속성

4. flex-basis: auto, 숫자

- 컨테이너 사이즈 변경 시 어떻게 늘어나고 줄어드는지를 지정하는 속성

5. flex: grow shrink basis

- grow, shrink, basis의 축약형 속성

6. align-self: flex-start, flex-end, center, baseline

- 아이템들을 개별적으로 배치하는 속성