CSS - 플렉스박스 : 컨테이너(Flex Container)

Container 와 item 을 정렬하기 위해 다음 표의 속성을 이용합니다.

속 성	설 명
justify-content	item 을 수평 방향으로 배치. flex-start: item 을 container 의 시작점에서부터 배치. 기본값. flex-end: item 을 container 의 끝점에서부터 배치. center: item을 container 의 가운데서부터 배치. space-between: 첫 번째 item 과 마지막 item 을 container 의 양끝에 배치하고 나머지 item을 균등하게 배치. space-around: item 사이 공간을 두고 균등하게 배치.
align-content	Item 을 수직 방향으로 플렉스 라인을 정렬. (단, Item 이 두 줄 이상이고, 여백이 있는 flex-wrap 속성이 있을 때만 가능함) stretch: item 박스를 늘려서 container 공간을 전부 채움. 기본값.   (width 나 height 가 auto 거나 값이 없을 때 채워짐) flex-start: item 을 container 의 위쪽에 배치. flex-end: item 을 container 의 아래쪽에 배치. center: item 을 container 의 가운데로 배치. space-between: 첫 번째 item 은 위쪽에 마지막 item 은 container 의 아래쪽에 배치하고 나머지 item 은 균등하게 배치. space-around: item 사이 공간을 두고 위아래로 균등하게 배치.
align-items	item 을 수직 방향으로 배치. (단, 두 줄 이상의 item 에서만 사용 가능함) stretch: item 박스를 늘려서 container 공간을 전부 채움. 기본값.   (width 나 height 가 auto 거나 값이 없을 때 채워짐) flex-start: item 을 부모 박스의 위쪽에 배치. 기본값. flex-end: item 을 부모 박스의 아래쪽에 배치. center: item 을 부모 박스의 가운데로 배치. baseline: item 을 부모 박스의 기준선에 배치.

justify-content 예제

이 속성은 item 을 수평 방향으로 정렬합니다.

display 를 인라인으로 설정하고, 넘치는 경우 flex-wrap 를 wrap 로 설정하여 자동 줄 바꿈하도록 배치한 결과입니다.

<style>
.container1, .container2, .container3, .container4, .container5 {
  background-color: #efefef;
  width: 150px;
  height: 150px;
  padding: 10px;
  margin: 10px;

  display: inline-flex;
  flex-wrap: wrap;
}
.container1 { justify-content: flex-start; }
.container2 { justify-content: flex-end; }
.container3 { justify-content: center; }
.container4 { justify-content: space-between; }
.container5 { justify-content: space-around; }

.container1 div, .container2 div, .container3 div, .container4 div, .container5 div {
  width: 50px;
  border: 1px solid #000;
  background-color: yellow;
  text-align: center;
}
</style>
<div class="container1">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container2">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container3">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container4">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container5">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>

다음 그림은 wrap 를 설정하지 않고 배치한 결과입니다. 줄 바꿈 하지 않았을 때와는 다르게 보여지는 것을 확인할 수 있습니다.

align-content 예제

이 속성은 수직 방향으로 플렉스 라인을 기준으로 정렬합니다.

다음 그림에서 알 수 있듯 가상의 선을 따라 컨테이너와 항목이 배치되는 것을 확인할 수 있습니다.

<style>
.container1, .container2, .container3, .container4, .container5 {
  background-color: #efefef;
  width: 150px;
  height: 150px;
  padding: 10px;
  margin: 10px;

  display: inline-flex;
  flex-wrap: wrap;
}
.container1 { align-content: stretch; }
.container2 { align-content: flex-end; }
.container3 { align-content: center; }
.container4 { align-content: space-between; }
.container5 { align-content: space-around; }
.container1 div, .container2 div, .container3 div, .container4 div, .container5 div {
  width: 50px;
  border: 1px solid #000;
  background-color: yellow;
  text-align: center;
}
</style>
<div class="container1">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container2">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container3">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container4">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container5">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>

아래 그림은 flex-wrap 속성이 wrap-reverse 일 때의 결과입니다.

align-items 예제

이 속성은 align-content 속성과 비슷하지만, 플렉스 라인이 아닌 item 을 기준으로 정렬합니다.

이 예제는 flex-wrap 속성의 값을 wrap 로 하고, align-items 속성을 설정했을 때의 결과입니다.

<style>
.container1, .container2, .container3, .container4, .container5 {
  background-color: #efefef;
  width: 170px;
  height: 170px;
  padding: 10px;
  margin: 10px;

  display: inline-flex;
  flex-wrap: wrap;
}
.container1 { align-items: stretch; }
.container2 { align-items: flex-start; }
.container3 { align-items: flex-end; }
.container4 { align-items: center; }
.container5 { align-items: baseline; }

.container1 div, .container2 div, .container3 div, .container4 div, .container5 div {
  width: 50px;
  border: 1px solid #000;
  background-color: yellow;
  text-align: center;
}
</style>

<div class="container1">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container2">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container3">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container4">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container5">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>

flex-wrap 속성의 값을 wrap-reverse 로 했을 때의 결과입니다.