[CSS] flex 속성

flex란?

일반적인 웹페이지의 레이아웃을 구성하기 위해서는 display, float, position등을 사용하여 레이아웃을 구축해 왔지만 이와 같은 속성을 사용하면 구현 방법이 복잡하고 레이아웃을 표현하는 데 한계에 부딪히곤 했습니다.

이런 문제점을 해결하기 위해 flex가 나타난 것이며 사용 방법은 display: flex;로 해당 요소에 flex를 지정하면 됩니다.

 

부모 요소에 display: flex; 를 설정하게 되면 그 부모 요소는 플렉스 컨테이너가 되고 자식 요소는 플렉스 아이템으로 인식하게 되므로 flexbox 레이아웃 모듈을 구성할 때는 콘텐츠(플렉스 항목)를 감싸는 부모 요소에 이 속성을 지정해야 합니다.

---

justify-content

flex요소들을 가로 선에서 정렬

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

 

flex-start

flex-end

center

space-between

space-around

---

align-items

flex요소들을 세로 선에서 정렬

• flex-start : 요소들을 컨테이너의 꼭대기로 정렬
• flex-end : 요소들을 컨테이너의 바닥으로 정렬
• center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬
• baseline : 요소들을 컨테이너의 시작 위치에 정렬한다.
• stretch : 요소들을 컨테이너에 맞도록 늘린다.

flex-start

flex-end

center

---

flex-direction

flex요소들이 정렬해야 할 방향을 지정

• row : 요소들을 텍스트의 방향과 동일하게 정렬한다.
• row-reverse : 요소들을 텍스트의 반대 방향으로 정렬한다.
• colum : 요소들을 위에서 아래로 정렬한다.
• colum-reverse : 요소들을 아래에서 위로 정렬한다.

※ column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀝니다.

row

row-reverse

column

column-reverse

---

align-self

align-self는 개별 요소에 적용할 수 있는 또 다른 속성으로 이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들을 지정한 요소에만 적용됩니다.

 

align-items와 동일하게 flex-start, flex-end, center, baseline, stretch를 사용합니다.

bomb_2 에 적용한 align-self: center

참조 : flexboxfroggy.com/#ko

Flexbox Froggy

flex 속성을 미니게임 형식으로 쉽게 이해할 수 있는 웹사이트입니다. 소요 시간은 10분 내외이며 한 번쯤 해보시길 추천드립니다.