[CSS] flex 속성 정리

flex 속성을 적용할 item들의 부모요소에 display: flex;를 적용해 주는 것이 시작이다.

 

1. justify-content

쉽게 말하면 메인축(가로)정렬을 어떻게 할 것인가.

가로정렬이라고 했지만 메인축이 기본이 가로방향이기 때문이고 만약 메인축 방향을 세로로 바꾸게 된다면 세로축 정렬이 될 수도 있다.

 

• flex-start: 왼쪽 정렬
• flex-end: 오른쪽 정렬
• center: 가운데 정렬
• space-between: 아이템들 사이에 같은 간격을 준다
• space-around: 아이템들의 둘레를 같게 한다.

 

2. align-items(아이템 전체 적용) / align-self(아이템 지정)

쉽게 말해서 세로정렬을 어떤 방식으로 할 것인가.

세로정렬이라고 했지만 메인축의 수직인 축을 말한다.

 

• flex-start : 위쪽 정렬
• flex-end : 아래쪽 정렬
• center : 가운데 정렬
• baseline : 글씨 밑부분 끝 선으로 맞춰서 정렬
• stretch : 아이템들이 세로방향으로 쭉 늘어난다

 

3. flex-wrap

아이템들의 길이가 부모요소의 너비를 넘어가게 됐을 때 줄바꿈을 해줄지 말지 정하는 속성

 

• nowrap: 줄바꿈 안함
• wrap : 줄바꿈
• wrap-reverse : 줄바꿈하고 역순 배치

 

3. align-content

align-items와 헷갈렸는데 align-content는 쉽게 말해서 세로로 아이템들이 두 줄 이상이 되었을 때 그 줄 사이의 간격을 설정해주는 속성이다.

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly
• stretch

 

4. flex-direction

메인축의 방향을 바꿔준다. 기본값은 왼쪽에서 시작해서 오른쪽 방향(->)이 메인축이다.

 

• row: 왼쪽에서 시작해서 오른쪽 방향(->)
• row-reverse : 오른쪽에서 시작해서 왼쪽방향(<-)
• column : 위쪽에서 시작해서 아래쪽 방향(↓)
• column-reverse : 아래쪽에서 시작해서 위쪽방향(↑)

 

5. flex-flow

flex-direction 과  flex-wrap을 한번에 쓸 수 있다

예를 들어

flex-direction: row 와 flex-wrap: nowrap을 합쳐서

 

flex-flow: row nowrap 로 쓸 수 있다.

 

6. order

순서를 지정해서 시각적으로 보여지는 순서를 바꿔준다.

시각장애인들이 사용하는 스크린리더으로 화면을 읽을 때는 순서가 바뀌지 않으니 주의해야한다.

 

모든 아이템의 order 기본값은 0이다.

예를들어 아이템 1~5까지 있다고 했을 때 아이템1을 마지막으로 배치하기 위해서는 아이템1에만 order:1로 적용해주면 마지막에 배치된다.

 

 

 

 

참고하면 좋은 정보

1. CSS flexbox 속성 배우기 게임

https://flexboxfroggy.com/#ko

2. 그림으로 잘 정리되어 있는 글

https://studiomeal.com/archives/197