[CSS 기초] flex 속성

 

안녕하세요 PNcoding입니다 :)

 

오늘은 레이아웃을 작성할 때에 유용하게 사용되는 flex 속성에 대하여 알아보도록 하겠습니다.

 

---

 

 

Flex

flex는 flexible box 혹은 flexbox라고 부르기도 합니다.

flex는 CSS의 display 속성으로 지정을 해 줄 수 있으며, 기존에 웹페이지의 레이아웃을 작성할 때에 사용되었던 float나 inline-block 등을 이용한 방법보다 훨씬 유용하게 레이아웃을 작성할 수 있는 장점이 있습니다.

 

 

Flex를 사용하기 위한 HTML 구조

flex를 사용하기 위해서는 반드시 부모요소와 자식요소가 필요합니다.

부모요소가 flex가 적용되는 영역이며, 부모요소 안의 자식요소들이 적용한 방법대로 배치가 된다고 생각하시면 됩니다.

<div class="container">
    <div class="items">첫번째1</div>
    <div class="items">222</div>
    <div class="items">플렉스3</div>
</div>

 

 

부모요소에게 적용하는 속성

display: flex;

flex를 적용시키기 위해서는 우선 부모요소에게 display속성으로 flex를 적용을 해줍니다.

.container {
    display: flex;
}

 

flex를 지정해 주면 자식요소는 부모요소 안에서 가로로 배치가 되며, 자식요소 안의 내용만큼 가로크기가 지정이 됩니다. 세로크기는 부모요소의 크기에 가득 채워집니다.

 

두 가지의 방법으로 flex를 지정해 줄 수 있는데 자식요소가 표현되는 방식은 바뀌는 게 없고, 부모요소의 특성이 block이냐 inline-block이냐의 차이가 있습니다.

속성 값	가지는 특성
flex	부모요소가 block 특성을 가지게 됨
inline-flex	부모요소가 inline-block 특성을 가지게 됨

 

display: flex 결과

display: flex 결과

 

display: inline-flex 결과

display: inline-flex 결과

 

 

flex-direction

자식요소의 주 축(main-axis)을 설정할 때 사용하는 속성입니다.

즉 주 축의 방향을 가로로 할 것인지 세로로 할 것인지를 정할 수 있습니다.

속성 값
row (기본값)	자식들이 가로로 배치
row-reverse	자식들이 가로 역순으로 배치
column	자식들이 세로로 배치 (block요소들이 배치된 것과 유사)
column-reverse	자식들이 세로 역순으로 배치

 

 

 

flex-wrap

부모요소가 자식요소들을 한 줄에 담을 공간이 부족할 때 자식요소의 줄 바꿈을 어떻게 할지 정하는 속성입니다.

속성값
nowrap (기본값)	줄바꿈을 하지 않음
wrap	줄바꿈을 함. float나 inline-block으로 배치한 것과 비슷하게 표현
wrap-reverse	줄바꿈을 함. 역순으로 배치

 

 

반응형

 

justify-content

주 축(main-axis)의 정렬 방법을 설정하는 속성입니다.

속성값
flex-start (기본값)	자식요소를 시작점으로 정렬
flex-end	자식요소를 끝점으로 정렬
center	자식요소를 가운데로 정렬
space-between	자식요소의 사이(between)에 동일한 간격을 만들어줌
space-around	자식요소의 둘레(around)에 동일한 간격을 만들어줌

 

 

align-items

교차축(main-axis)의 정렬 방법을 설정하는 속성입니다. 주 축의 수직방향의 정렬이라고 보시면 됩니다.

속성 값
stretch (기본값)	자식요소의 크기가 수직 방향으로 끝까지 늘어남
flex-start	자식요소를 시작점으로 정렬
flex-end	자식요소를 끝점으로 정렬
center	자식요소를 가운데 정렬

 

flex-direction: row일 때의 결과화면입니다.

주 축의 방향에 따라 결과화면이 달라집니다.

 

 

 

 

align-content

flex-wrap: wrap이 설정된 상태에서 자식요소의 행이 2줄 이상 되었을 때 교차축(main-axis)의 정렬 방법을 설정하는 속성입니다.

속성값
stretch (기본값)	자식요소의 크기가 수직 방향으로 끝까지 늘어남
flex-start	자식요소를 시작점으로 정렬
flex-end	자식요소를 끝점으로 정렬
center	자식요소를 가운데 정렬
space-between	자식요소의 사이(between)에 동일한 간격을 만들어줌
space-around	자식요소의 둘레(around)에 동일한 간격을 만들어줌

 

 

 

---

 

flex와 관련된 속성은 좀 더 있지만, 기본적으로 주축의 방향과 정렬하는 방법만 알아도 기본적인 레이아웃을 구성하는 데 있어서 큰 어려움은 없을 거예요.

 

직접 작업을 해 보시면서 어떤 식으로 적용이 되는지 확인을 해 보시는 것을 추천드립니다 :)