[CSS] flex 알아보기

flex는 웹페이지의 레이아웃을 만들 때 사용하는 방법 중 하나입니다.

flex를 사용하면 크기나 내용에 관계없이 요소들을 쉽게 정렬할 수 있습니다.

 

| 구조

정렬하고 싶은 요소들의 부모박스(container)에 display: flex 속성을 부여하면 됩니다.

<div class="container">
  <div class="box">박스1</div>
  <div class="box">박스2</div>
  <div class="box">박스3</div>
</div>

.container {
  background-color:yellow;
  display: flex;
}

.box {
  background-color: orange
}

박스1

박스2

박스3

기본적으로 flex박스내부의 요소들은 같은 간격으로 한 줄로 배열됩니다.

| 속성

이제 flex 컨테이너를 만들었으면 여러 가지 속성을 이용해 컨테이너의 레이아웃을 만들 수 있습니다.

일반적으로 가장 많이 사용하는 속성은 다음과 같습니다.

 

1. flex-direction

이 속성은 컨테이너 내의 항목의 방향을 정의해 줍니다.

flex-direction: row; /* 항목을 일렬로 정렬(기본값) */

박스1

박스2

박스3

 

 

flex-direction: row-reverse; /* 컨테이너 오른쪽부터 일렬로 정렬 */

박스1

박스2

박스3

 

 

flex-direction: column; /* 컨테이너 상단부터 세로로 정렬 */

박스1

박스2

박스3

 

 

flex-direction: column-reverse; /* 컨테이너 하단부터 세로로 정렬 */

박스1

박스2

박스3

 

2. justify-content

이 속성은 컨테이너의 주 축을 따라서 요소들이 어떻게 분포되는지 정의해 줍니다.

justify-content: flex-start; /* 요소를 주축의 시작에 맞춰 정렬(기본값) */

박스1

박스2

박스3

 

 

justify-content: center; /* 요소를 가운데 정렬 */

박스1

박스2

박스3

 

 

justify-content: flex-end; /* 요소를 주축의 끝에 맞춰 정렬 */

박스1

박스2

박스3

 

 

justify-content: space-between; /* 간격을 균등하게 정렬 */

박스1

박스2

박스3

 

 

justify-content: space-around; /* 주변에 공간을 두고 간격을 균등하게 정렬 */

박스1

박스2

박스3

 

3. align-items

이 속성은 컨테이너의 수직 축을 따라서 요소들이 어떻게 분포되는지 정의해 줍니다.

align-items: stretch; /* 수직 축을 따라서 컨테이너를 채움(기본값)  */

박스1

박스2

박스3

 

 

align-items: flex-start; /* 수직 축을 따라서 컨테이너의 시작지점에 맞춰 정렬  */

박스1

박스2

박스3

 

 

align-items: center; /* 수직 축을 따라서 컨테이너의 중앙에 맞춰 정렬  */

박스1

박스2

박스3

 

 

align-items: flex-end; /* 수직 축을 따라서 컨테이너의 끝에 맞춰 정렬  */

박스1

박스2

박스3

 

4. flex-wrap

이 속성은 컨테이너의 요소들이 컨테이너의 크기를 초과할 경우에 어떻게 할지를 정의해 줍니다.

flex-wrap: wrap; /* 줄바꿈을 해줌 */

박스1

박스2

박스3

 

 

flex-wrap: wrap; /* 줄바꿈을 안해줌(기본값) */

박스1

박스2

박스3

 

 

flex-wrap: wrap-reverse; /* 줄바꿈을 하고 요소들을 역순으로 정렬 */

박스1

박스2

박스3