CSS 평면 요소 배치 flex

겹치는 요소가 아닌 평면적으로 요소를 배치하기 위한 방법을 알아보자.

flex

현대 웹 디자인에서 가장 많이 사용하는 레이아웃 도구 중 하나로, 1차원적 레이아웃(행 또는 열)을 쉽게 만들 수 있고 요소들의 크기와 순서를 동적으로 조절할 수 있다.

부모 요소를 display: flex로 설정하면 부모요소는 flex-container, 그 자식 요소들은 flex-item이 되어 flexbox 레이아웃을 사용할 수 있다.

<!-- index.html -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

/* style.css */
.container {
  display: flex;
}

.item {
  background-color: #4967d8;
  color: white;
  padding: 10px;
  margin: 5px;
  text-align: center;
}

mdn flex
flex n grid

flex-container 속성

flex-container인 부모에게 설정하는 속성에 대해 알아보자.

flex-direction

주축의 방향을 설정할 수 있으며 기본값은 row이다.

/* 정렬 방향 */
.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
}
.row-reverse {
  flex-direction: row-reverse;
}
.column-reverse {
  flex-direction: column-reverse;
}

• row : 기본값. 왼쪽에서 오른쪽 (주축이 행 방향)
• column: 위에서 아래 방향 (주축이 열 방향)
• row-reverse: 오른쪽에서 왼쪽
• column-reverse: 아래에서 위 방향

justify-content

주축을 기준으로 배열의 위치를 조절하거나 아이템 간의 설정을 할 수 있다.

/* 주축 기준 아이템 정렬 방법 */
.flex-start {
  justify-content: flex-start;
}
.flex-end {
  justify-content: flex-end;
}
.center {
  justify-content: center;
}
.space-between {
  justify-content: space-between;
}
.space-around {
  justify-content: space-around;
}
.space-evenly {
  justify-content: space-evenly;
}

• flex-start: 시작점에 정렬
• flex-end: 끝점에 정렬
• center: 가운데 정렬
• space-between: 아이템 사이에 동일한 간격을 설정
• space-around: 아이템 주변에 동일한 간격을 설정
• space-evenly: 아이템 주변과 시작과 끝에 동일한 간격을 설정

align-items

교차 축을 기준으로 정렬 방법을 설정할 수 있다.

/* 교차축 기준 아이템 정렬 방법 */
.stretch {
  align-items: stretch;
}
.flex-start {
  align-items: flex-start;
}
.flex-end {
  align-items: flex-end;
}
.center {
  align-items: center;
}
.baseline {
  align-items: baseline;
}

• stretch: 기본값. 교차축을 채우기 위해 아이템을 늘립니다.
• flex-start: 시작점에 정렬
• flex-end: 끝점에 정렬
• center: 가운데 정렬
• baseline: 텍스트의 기준선에 정렬

align-content

여러 줄의 flex-item들을 교차축 방향으로 정렬할 때 사용한다.
이 속성은 flex-wrap: wrap이 설정되어 있고, 여러 줄의 flex 아이템이 있을 때만 효과가 있다.

/* 교차축 방향 아이템 정렬 방법 */
.flex-start {
  align-content: flex-start;
}
.flex-end {
  align-content: flex-end;
}
.center {
  align-content: center;
}
.space-between {
  align-content: space-between;
}
.space-around {
  align-content: space-around;
}
.stretch {
  align-content: stretch;
}

• flex-start: 여러 줄들을 컨테이너의 시작점으로 정렬
• flex-end: 여러 줄들을 컨테이너의 끝점으로 정렬
• center: 여러 줄들을 컨테이너의 세로선 상의 가운데로 정렬
• space-between: 여러 줄들 사이에 동일한 간격
• space-around: 여러 줄들 주위에 동일한 간격
• stretch: 여러 줄들을 컨테이너에 맞도록 늘림

gap

아이템 사이의 간격을 설정할 때 사용 할 수 있는 속성이다.
값을 1개만 입력하는 경우 열간행간을 동일하게 적용하며, 값을 2개 입력하는 경우 첫번째 값은 행간, 두번째 값은 열간이 된다.

/* 아이템 사이의 간격 */
.container {
  display: flex;
  gap: 10px 20px; /* 행간 10px, 열간 20px */
}

flex-wrap

한 줄에 배치되게 할 것인지, 가능한 영역 내에서 여러 행으로 나누어 표현할 것인지 결정한다.
기본값은 nowrap이다.

/* 아이템 배치 방법 */
.wrap {
  flex-wrap: wrap;
}
.nowrap {
  flex-wrap: nowrap;
}
.wrap-reverse {
  flex-wrap: wrap-reverse;
}

• wrap: 컨테이너의 폭을 넘어가는 아이템은 다음 줄로 넘김
• nowrap: 컨테이너 안에 아이템을 다 집어넣음 (아이템이 줄어들 수 있음)
• wrap-reverse: wrap의 상태에서 아이템의 순서가 역전됨

flex-flow

flex-direction과 flex-wrap의 단축 속성이다.

.container {
  flex-flow: <flex-direction> <flex-wrap>;
}

flex-item 속성

flex-item인 자식 요소들에게 적용하는 속성을 알아보자.

flex-basis

flex-item의 초기 크기를 설정하며, 기본값은 auto이다.
너비와 높이가 축의 방향에 따라 달라지며 내부 콘텐츠에 따라 유연한 크기를 가진다.
flex-direction이 row일 경우 width 값이, column일 경우 height 값이 무시된다.

/* 아이템의 초기 크기 설정 */
.basis-auto {
  flex-basis: auto;
}
.basis-0 {
  flex-basis: 0;
}
.basis-100 {
  flex-basis: 100px;
}
.basis-200 {
  flex-basis: 200px;
}

flex-basis에는 기본적으로 px이나 em 등의 단위값을 사용하며, 0 외에 다른 상숫값을 사용할 수 없다.

flex-grow

아이템이 flex 컨테이너 내부에서 할당할 수 있는 공간의 비율을 지정하며, 값이 0일 경우 아이템은 늘어나지 않는다.
모든 아이템의 flex-grow 값이 1이면, 컨테이너 내부에서 남은 면적을 아이템의 수만큼 나눠 동일한 크기의 공간을 할당받는다.

.grow-0 {
  flex-grow: 0;
}
.grow-1 {
  flex-grow: 1;
}
.grow-2 {
  flex-grow: 2;
}

flex-basis: 0을 설정하면 여백 공간이 아닌 전체 공간을 분할한다.

flex-shrink

아이템의 크기를 축소할 때 사용하며, 값이 0인 경우 축소되지 않는다.
값이 클 수록 더 많이 축소된다.

.shrink-0 {
  flex-shrink: 0;
}
.shrink-1 {
  flex-shrink: 1;
}
.shrink-2 {
  flex-shrink: 2;
}
.shrink-3 {
  flex-shrink: 3;
}

align-self

개별 flex-item에 대해 교차축 정렬을 지정할 수 있으며, 기본값은 auto다.
이 속성은 부모의 align-items속성을 상속받으며, 따로 지정하는 경우 align-items속성값을 덮어씌운다.

.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.self-end {
  align-self: flex-end;
}

order

flex-item의 순서를 지정하며, 기본값은 0이다.
값이 작을 수록 앞에 배치된다.

.order-1 {
  order: 1;
}

마크업 순서는 수정하지 않으면서 시각적인 배치 순서만 바꾸고싶은 경우 사용할 수 있다.

flex

flex-grow, flex-shrink, flex-basis의 단축 속성이다.

.item {
  flex: 1 1 100px;
  /* flex-grow: 1, flex-shrink: 1, flex-basis: 100px */
}

재미있게 공부하기

flexbox froggy
플렉스 박스 디펜스
Flexbox Zombies
어드밴처 그리드레이아웃게임

codepip