| 구조

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

</div>

.container {

background-color:yellow;

display: flex;

}

.box {

background-color: orange

}

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

| 속성

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

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

1. flex-direction

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

/* 항목을 일렬로 정렬(기본값) */

flex-direction: row;

/* 컨테이너 오른쪽부터 일렬로 정렬 */

flex-direction: row-reverse;

/* 컨테이너 상단부터 세로로 정렬 */

flex-direction: column;

/* 컨테이너 하단부터 세로로 정렬 */

flex-direction: column-reverse;

2. justify-content

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

/* 요소를 주축의 시작에 맞춰 정렬(기본값) */

justify-content: flex-start;

/* 요소를 가운데 정렬 */

justify-content: center;

/* 요소를 주축의 끝에 맞춰 정렬 */

justify-content: flex-end;

/* 간격을 균등하게 정렬 */

justify-content: space-between;

/* 주변에 공간을 두고 간격을 균등하게 정렬 */

justify-content: space-around;

3. align-items

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

/* 수직 축을 따라서 컨테이너를 채움(기본값) */

align-items: stretch;

/* 수직 축을 따라서 컨테이너의 시작지점에 맞춰 정렬 */

align-items: flex-start;

/* 수직 축을 따라서 컨테이너의 중앙에 맞춰 정렬 */

align-items: center;

/* 수직 축을 따라서 컨테이너의 끝에 맞춰 정렬 */

align-items: flex-end;

4. flex-wrap

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

/* 줄바꿈을 해줌 */

flex-wrap: wrap;

/* 줄바꿈을 안해줌(기본값) */

flex-wrap: wrap;

/* 줄바꿈을 하고 요소들을 역순으로 정렬 */

flex-wrap: wrap-reverse;

[CSS] flex 알아보기