HTML/CSS - flex(1)

안녕하세요, 드디어! flex를 정리하려 합니다.

 

이때까지 수평 정렬을 하기 위해 display: inline-block;이나 float: left;를 사용하는 법에 대해 공부했었는데요, 이번에 정리할 flex를 배우게 되면 아주 손쉽게 수평/수직 정렬이 가능합니다! 간단히 block 속성 값을 갖는 div태그들을 flex를 이용하여 수평 정렬하는 것을 확인해보겠습니다. 아래 코드와 같이 container에 flex속성 값을 주는 것만으로 수평 정렬이 일어났습니다! (여기서 container의 자식 클래스인 item에 display: flex;를 적용하면 수평 정렬이 일어나지 않습니다! 이것은 container에 flex속성 값을 부여해야지 item개념이 생기기 때문인데요, 아래에서 추가 설명드리겠습니다)

<!-- HTML -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<!-- CSS -->
.container {
  border: 2px solid red;
  display: flex;
}

.container .item {
  width: 100px;
  height: 100px;
  border: 2px solid;
}

flex는 Container와 Items로 이루어져 있습니다. Container는 Item의 부모 요소이며 Item을 정렬하기 위해서는 Container가 필수적으로 필요합니다. Container의 속성으로는 display, flex-flow, justify-content 등이 있으며, Item의 속성으로는 order, flex, align-self 등이 있습니다.

 

Container

-. display : 

속성 값으로는 flex / inline-flex가 있습니다. flex의 경우 Block 특성을 가지는 container를 정의하는 것이고 inline-flex의 경우 inline 특성을 가지는 container를 정의해줍니다. 아래 코드와 이미지를 통해 설명드리겠습니다. inline-flex로 정의할 경우 container1과 container2가 inline 속성을 갖는 것처럼 옆으로 쌓이게 되고, 둘 다 flex일 경우 container1과 container2이 block속성과 같이 옆으로 쌓이지 않고 수직으로 쌓이게 됩니다. (여기서 각 container 내부의 item들은 container의 flex값으로 인해 수평으로 정렬이 됩니다!) 분량이 많아 inline-flex를 적용했을 때 코드만 추가하겠습니다.

<!-- HTML -->
<div class="container1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div class="container2">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<!-- CSS -->
.container1 {
  border: 2px solid red;
  display: inline-flex;
}

.container2 {
  border: 2px solid red;
  display: inline-flex;
}

.item {
  width: 100px;
  height: 100px;
  border: 2px solid;
}

둘다 inline-flex를 설정하였을 때

위 container는 inline-flex / 아래 container는 flex를 설정

-. flex-flow

 : [단축 속성]flex-direction + flex wrap 

Flex Items의 주 축(main-axis) 설정 및 Items의 여러 줄 묶음(줄 바꿈)도 설정 

flex-direction : Items의 주 축(main-axis)을 설정 (기본값: row)

flex-wrap : Items의 여러 줄 묶음(줄 바꿈) 설정 (기본값: nowrap)

 

flex-direction은 말 그대로 주축으로 row(왼쪽에서 오른쪽)를 사용할지 column(위에서 아래)을 사용할지 정하는 속성이며 reverse를 붙여 row-reverse(오른쪽에서 왼쪽)와 column-reverse(아래에서 위)를 만들 수 있습니다. wrap과 no-wrap의 경우 한 줄로 표현할지 여러 줄로 나누어 item의 크기를 유지할지 선택할 수 있습니다. wrap에 대해서만 아래 예시를 살펴보겠습니다. (아래 코드는 단축 속성인 flex-flow를 사용하여 flex-direction과 flex-wrap 속성을 한 번에 나타내었습니다.)

<!-- HTML -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

<!-- CSS -->
.container {
  border: 3px solid;
  display: flex;
  flex-flow: row nowrap;
}

.item {
  width: 50px;
  height: 50px;
  background: yellow;
  border: 1px dashed black;
  border-radius: 10px;
}

기본값 no-wrap인 경우 

no-wrap에서 창의 가로 크기를 줄인 경우

wrap인 경우

-. justify-content

: 주 축(main-axis)의 정렬 방법 설정

flex-start : items를 시작점(flex-start)으로 정렬 (기본값/왼쪽 정렬)

flex-end : items를  끝점(flex-end)으로 정렬 (오른쪽 정렬)

center : items를 가운데 정렬

space-between : 시작 Item과 마지막 Item은 끝에 붙이고 나머지 Items는 사이에 고르게 정렬

space-around : Items를 균등한 여백을 포함하여 정렬

 

아래 코드와 이미지로 한번에 확인해 보겠습니다. (순서는 위에 소개한 순서로 작성하였습니다.)

<!-- HTML -->
<div class="container justify1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<div class="container justify2">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<div class="container justify3">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<div class="container justify4">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<div class="container justify5">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>


<!-- CSS -->
.container {
  border: 3px solid;
  margin-bottom: 10px;
  display: flex;
  flex-flow: row wrap;
}

.justify1 {
  justify-content: flex-start;
}

.justify2 {
  justify-content: flex-end;
}

.justify3 {
  justify-content: center;
}

.justify4 {
  justify-content: space-between;
}

.justify5 {
  justify-content: space-around;
}

.container .item {
  width: 50px;
  height: 50px;
  background: yellow;
  border: 2px dashed black;
  border-radius: 10px;
}

-. align-content

: 교차 축(cross-axis)의 정렬 방법 설정

flex-wrap: wrap;으로 여러 줄(2줄 이상)이며 여백이 있을 때 사용 가능 / 한 줄이라면 align-items를 이용

stretch : Container의 교차 축을 채우기 위해 Item을 늘림

flex-start : items를 시작점(flex-start)으로 정렬 (기본값 / 위쪽 정렬)

flex-end : items를  끝점(flex-end)으로 정렬 (

center : items를 가운데 정렬

space-between : 시작 Item과 마지막 Item은 끝에 붙이고 나머지 Items는 사이에 고르게 정렬

space-around : Items를 균등한 여백을 포함하여 정렬

center인 경우와 align-content 사용조건이 아닌 nowrap인 경우를 코드 및 이미지로 확인해 보겠습니다.

<!-- HTML -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<!-- CSS -->
.container {
  height: 400px;
  border: 3px solid;
  margin-bottom: 10px;
  display: flex;
  flex-flow: row wrap;
  align-content: center;
}

.container .item {
  width: 50px;
  height: 50px;
  background: yellow;
  border: 2px dashed black;
  border-radius: 10px;
}

위 코드의 결과값

wrap이 아닌 nowrap인 경우

-. align-items

: 교차 축(cross-axis)에서 items의 정렬 방법 설정

Items가 한 줄일 경우 사용 (flex-wrap으로 여러 줄일 경우 align-content 속성이 우선)

stretch : Container의 교차 축을 채우기 위해 Item을 늘림

flex-start : items를 시작점(flex-start)으로 정렬 (기본값 / 위쪽 정렬)

flex-end : items를  끝점(flex-end)으로 정렬 (

center : items를 가운데 정렬

baseline : 글자의 문자열의 baseline을 기준으로 정렬

align-content와 동일하게 center일 때와 baseline인 경우를 살펴보겠습니다.

<!-- HTML -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<!-- CSS -->
.container {
  height: 400px;
  border: 3px solid;
  margin-bottom: 10px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.container .item {
  width: 50px;
  height: 100px;
  background: yellow;
  border: 2px dashed black;
  border-radius: 10px;
}

<!--  baseline 확인을 위해 글자 크기 크게-->
.container .item:nth-child(3) {
  font-size: 40px;
}

align-items: center;

align-items: baseline;

<글자를 가운데 정렬하는 방법>

추가로 위의 노란 items들 안의 글자를 가운데 정렬하는 방법도 정리해 보겠습니다.

이제까지는 container에 display: flex;를 사용하였는데요, 동일하게 item에 display: flex;를 적용한 후에 justify-content와 align-items(글이 여러 줄이 아니므로)를 사용하여 가운데 정렬이 가능합니다!

<!-- HTML -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>


<!-- CSS -->
.container {
  height: 400px;
  border: 3px solid;
  margin-bottom: 10px;
  display: flex;
}

.container .item {
  width: 100px;
  height: 100px;
  background: yellow;
  border: 2px dashed black;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}