[CSS] flex 명령어

justify-content (flex요소들을 가로선 상에서 정렬)

• flex-start : 왼쪽으로 정렬 - default
• flex-end : 오른쪽으로 정렬
• center : 가로선 상 가운데로 정렬
• space-between : 요소들 사이의 간격을 동일하게 둔다.
• space-around : 요소들 주의에 동일한 간격을 둔다.

align-items (flex요소들을 세로선 상에서 정렬)

• flex-start: 꼭대기로 정렬
• flex-end: 바닥으로 정렬
• center: 세로선 상 가운데로 정렬
• baseline: 컨테이너(담은 곳)시작 위치에 정렬
• stretch: 컨테이너(담은 곳)에 맞도록 늘림 - default

flex-direction (정렬할 방향을 정함)

• row: 텍스트 방향(가로)으로 정렬 - default
• row-reverse: row의 반대로 정렬
• column: 위아래 방향(세로)으로 정렬
• column-reverse: column의 반대로 정렬

방향을 바꾸면 justify와 align 도 바뀜 => 세로선 justify, 가로선 align

order (요소의 순서를 지정)

-n ~ n

align-self (items의 영향을 받지않고 개별로 요소를 적용시킴)

flex-wrap (flex요소들을 한 줄 또는 여러 줄에 걸쳐 정렬)

• nowrap: 모든 요소들을 한 줄에 정렬 - defalut
• wrap: 요소들을 여러 줄에 걸쳐 정렬
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬

flex-flow (flex-direction + flex-wrap을 합침)

• flex-direction명령어 flex-wrap명령어

align-content (줄 사이의 간격을 지정)

• flex-start: 여러 줄들을 컨테이너 꼭대기에 정렬
• flex-end: 여러 줄들을 컨테이너 바닥에 정렬
• center: 어러 줄들을 세로선 상의 가운데에 정렬
• space-between: 어러 줄들의 사이에 동일한 간격을둠
• space-around: 여러 줄들 주위에 동일한 간격을 둠
• stretch: 여러 줄들을 컨테이너에 맞도록 늘림

 

연습 사이트

개구리 : https://flexboxfroggy.com/#ko

Flexbox Froggy

디펜스 : http://www.flexboxdefense.com/

Flexbox Defense