본문 바로가기
FrontEnd/CSS

#4. CSS FlexBox(Flexible Box module) 사용법

AXCE 2021. 7. 23. 16:26
반응형

# 일명 flexbox라고 불리는 Flexible box module은 HTML 내의 아이템 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었습니다.
# 이번 장에서는 flexbox의 주요 기능에 대한 내용을 공부해보도록 하겠습니다.



# 비전공자가 이해한 CSS

 



Flexbox

일명 flexbox라고 불리는 Flexible Box module은 HTML 내의 아이템 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었습니다. flexbox는 container에 속성값이 존재하고, item들에 각각 속성값을 지정할 수 있습니다.

하나의 container에 3개의 item이 들어있는 모습


flexbox에는 방향이 존재합니다. main axis(중심축)와 cross axis(반대축) 입니다. cross axis은 main axis를 지정해주면 자동으로 지정됩니다. main axis를 수평에 두냐 수직에 두냐에 따라 반대축이 지정됩니다. 지정하는 방법은 아래 container 속성에서 공부하도록 하겠습니다.

중심축을 수평으로 한 결과
중심축을 수직으로 한 결과

아래는 예제에서 사용될 HTML 과 CSS 입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
  </div>
</body>
</html>
.container {
  background: beige;
  height: 100vh;
}

.item {
  width: 40px;
  height: 40px;
}

.item1 {
  background: #ff8a80;
}

.item2 {
  background: #ffb2dd;
}

.item3 {
  background: #ffb2ff;
}

.item4 {
  background: #e7b9ff;
}

.item5 {
  background: #c0cfff;
}

.item6 {
  background: #80d8ff;
}

.item7 {
  background: #84ffff;
}

.item8 {
  background: #a7ffeb;
}

.item9 {
  background: #ffff8d;
}

.item10 {
  background: #ff9e80;
}

 

1) container 속성값:

(1) display: flex;

.container {
  background: beige;
  height: 100vh;
  display: flex;
}

- container를 flexbox로 만들겠다는 의미입니다.

flexbox 설정 전

 

flexbox 설정 후


(2) flex-direction:
- flex-direction 속성값은 item들을 container 내에서 정렬하는 방법을 지정합니다.

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction: row;
}

- "row" : 행 단위로 정렬합니다. item들의 순서는 오른쪽에서 왼쪽입니다.

row

- "row-reverse" : 행 단위로 정렬합니다. 단, item들을 왼쪽에서 오른쪽으로 순서를 정렬하고 시작점은 오른쪽입니다.

row-reverse

- "column" : 열 단위로 정렬합니다. item들은 위에서 아래로 정렬합니다.

column

- "column-reverse" : 열 단위로 정렬합니다. item들은 아래에서 위로 정렬하고, 시작점은 아래쪽입니다.

column-reverse


(3) flex-wrap:
- item들의 배치를 결정합니다. 이 속성값을 정하면 item들을 자동적으로 다음 줄로 넘기거나, 크기를 줄이거나 할 수 있습니다.

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

- "wrap" : 한 줄에 item들이 꽉 차게 되면 자동적으로 다음줄로 넘어갑니다.

wrap

- "nowrap" : 한 줄에 item들이 몇 개가 들어가도 크기가 줄어들면서 한 줄에 빼곡하게 채워넣게 됩니다.

nowrap

- "wrap-reverse" : item들을 아래에서 위로 배치합니다.

wrap-reverse

(4) flex-flow:
- flex-flow = flex-direction + flex-wrap

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-flow: column nowrap;
}


(5) justify-content:
- 중심축(main axis)에서 item들을 어떻게 배치할 것인가를 정의합니다.

.container {
  background: beige;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
}

- "flex-start" : 기본값입니다. 왼쪽에 정렬합니다. 이때 item들의 순서는 동일합니다.

flex-start

- "flex-end" : item들을 오른쪽에 정렬합니다. 이때 item들의 순서는 동일합니다. 정렬은 오른쪽에, 아이템 순서는 왼쪽에서 오른쪽입니다.

flex-end

- "center" : 가운데 정렬합니다.

center

- "space-around" : item들에 공백을 추가해줍니다. 이때, 가장 끝에 있는 값들의 공백은 한 개만 적용되기 때문에 가운데 있는 공백들보다 작게 들어갑니다.

space-around

- "space-evenly" : item들에 공백을 추가하는데, 양 끝에 있는 값들의 공백의 크기도 중간값들과 똑같이 들어갑니다.

space-evenly

- "space-between" : 양 끝은 화면에 맞게 끝에 배치하고, 가운데는 space를 주는 방식입니다.

space-between

(6) align-items:
- 반대축(cross axis)에서 item들을 어떻게 배치할 것인지를 정의합니다.

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
}

- "center" : 위의 예제에서는 flex-direction이 row이기 때문에 중심축은 수평방향입니다. 따라서 align-items를 조절했을 때는 item들이 수직으로 이동합니다.

center

- "baseline" : item에 padding이 들어가 크기가 달라 정렬이 틀어졌을 경우 baseline;을 이용해 item들을 정렬합니다.

baseline

(7) align-content:
    - align-content는 justify-content와 같은 값을 가지고 있습니다. 이는 중심축을 기준으로 하는 것이 아닌 반대축(cross axis)을 기준으로 합니다.

 

 

2) item 속성값

(1) order: item들의 순서를 변경해줍니다. 기본값은 0입니다. 

.item1 {
  background: #ff8a80;
  padding: 20px;
  order: 3;
}

item6, 7, 8, 9, 10 의 경우 기본값인 0으로 설정이 되어 있기 때문에 맨 앞에 배치됩니다.

(2) flex-grow와 flex-shrink : container가 늘어나거나 줄어들었을 때 item들의 크기 변화를 나타냅니다.
- "flex-grow: 1;" : container를 꽉 채우려고 늘어납니다. 모든 item에 flex-grow를 설정하면 설정한 배율대로 크기가 조정됩니다.

- "flex-shrink: 0;" : container가 작아졌을 때 item의 변화를 지정합니다. flex-shrink를 2로 지정하면 줄어들 때 1로 지정한 값들보다 2배로 더 줄어드는 효과를 가져옵니다.

(3) "flex-basis: auto;" : 좀 더 세부적으로 item이 공간을 차지하는 것을 설정합니다. 기본값이면 flex-grow와 flex-shrink의 설정에 따라 조절됩니다. 하지만 이것을 %로 설정한다면 width의 크기에 따라 그 배율만큼 공간을 차지합니다. 예를 들어 item1에 60%를, item2에 30%, item3에 10%라면 container가 커지거나 줄어들 때 6:3:1의 비율을 유지해 커지거나 작아집니다.

(4) "align-self: center;" : item들을 정렬합니다. container의 지정에서 벗어나서 item 하나만을 설정할 수 있습니다. 만약 item3에 "align-self: center;"를 한다면 아래와 같이 변합니다.

 

 

# 위의 내용은 Youtube 드림코딩 by 엘리를 참고해서 작성
   - 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다.
# CSS reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
# CSS reference: https://www.w3schools.com/cssref/
# CSS 작성 연습 사이트: Jsbin.com

 

반응형
저작자표시 비영리 변경금지

'FrontEnd > CSS' 카테고리의 다른 글

#6. CSS Reset 사용방법  (0) 2021.11.02
#5. CSS에서 색깔을 변수로 사용하는 방법  (0) 2021.07.27
#3. CSS "100%" vs "100vh" 의 차이점  (0) 2021.07.22
#2. CSS display 와 position 이해하기 !  (0) 2021.07.20
#1. CSS 정의 및 selector 사용법  (0) 2021.07.19

'FrontEnd/CSS' Related Articles

티스토리툴바