🎨 CSS 2 | Flexbox (with 드림코드 by 앨리) 1탄

CSS 2021. 12. 17. 17:32

Step 1: Background

flexbox가 있기 전에는 float, position, table을 사용해서 하나하나 배치를 해주었다.

예를 들어 float의 경우는 본문과 사진을 함께 배치할 때 사진의 위치를 left , center, right 으로 조정해주었다. 그리고 본문을 다시 또 나눠서 하나는 오른쪽에 나머지 하나도 float을 사용해 아래에 배치해주었다.

.img {
  float : left
}

float 의 원래 목적은 텍스트와 이미지를 배치하는 것이었지만, 원래 목적에서 벗어나게 되었고, 코드도 복잡해졌다. flexbox가 등장하게 되면서 float은 원래 목적으로만 사용할 수 있게 되었다.

Step 2 : Flexbox

Flexbox layout 모듈(Flexbox)은 박스와 아이템들을 자유자재로 열과 행으로 배치할 수 있도록 도와주는 도구이다. 웹사이트 레이아웃을 할 때 사용하면 훨씬 쉽고 빠르게 배치를 할 수 있다.

flexbox에서 이 2가지를 가장 먼저 알고 있어야 한다.

1. Flexbox는 크게 container에 주는 속성과 item들에게 주는 속성으로 나뉜다.

container 에 꾸며줄 수 있는 속성들

- display

- flex-direction

- flex-wrap

- felx-flow

- justify-content

- align-items

- align-content

item 에 꾸며줄 수 있는 속성들

- order

- flex-grow

- flex-shrink

- flex

2. Flexbox는 크게 중심축과 반대축이 있다.

main-axis는 아이템들이 왼쪽에서 오른쪽으로 나열된 것을 볼 수 있다. 이 때 중심축은 수평선이다. 그리고 반대축은 수직선이 된다.

반대로 cross-axis에서는 아이템들이 위에서 아래로 나열된 것을 볼 수 있다. 이 때 중심축은 수직선이고 반대축은 수평선이 된다.

Step 3 : Flexbox 부모에게 줄 수 있는 속성들 (container)

먼저 item들을 생성해주자.

index.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <title></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안에 10개의 div 아이템들을 넣어주었다.

style.css

.container {
    background-color: beige;
    height: 100vh;
}

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

.item1 {
    background-color: rgb(247, 114, 114);
}

.item2 {
    background-color: rgb(250, 134, 153);
}

.item3 {
    background-color: rgb(165, 100, 250);
}

.item4 {
    background-color: rgb(129, 103, 255);
}

.item5 {
    background-color: rgb(83, 178, 255);
}

.item6 {
    background-color: rgb(67, 155, 94);
}

.item7 {
    background-color: rgb(162, 233, 168);
}

.item8 {
    background-color: rgb(243, 231, 123);
}

.item9 {
    background-color: rgb(250, 170, 21);
}

.item10 {
    background-color: rgb(255, 79, 79);
}

- display

flexbox 레이아웃을 사용하려면 먼저 flexbox를 사용하겠다고 알려줘야 한다.

style.css

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

...

- flex-direction

row (default) : 아이템들이 왼쪽에서 오른쪽으로 배치된다.

중심축 : row, 반대축 : column

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

...

row-reverse : 아이템들이 오른쪽에서 왼쪽으로 배치된다.

중심축 : row, 반대축 : column

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

...

column : 아이템들이 위에서 아래로 배치된다.

중심축 : column, 반대축 : row

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

...

column-reverse : 아이템들이 아래에서 위로 배치된다.

중심축 : column, 반대축 : row

.container {
    background-color: beige;
    height: 100vh;
    display: flex;
    flex-direction: column-reverse;
}

...

- flex-wrap

nowrap(default) : 모든 아이템들이 한 줄에 배치된다.

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

...

wrap : 아이템들이 자동 줄 바꿈되어 위에서 아래로 배치된다.

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

...

wrap-reverse : 아이템들이 자동 줄 바꿈되어 아래에서 위로 배치된다.

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

...

- felx-flow

border의 속성값을 지정해줄 때 border : 1px solid black 으로 한 번에 지정해 줄 수 있다.

이처럼 flex-flow를 이용하면 flex-direction과 flex-wrap을 한 번에 지정해 줄 수 있다.

.container {
    background-color: beige;
    height: 100vh;
    display: flex;
    /* flex-direction: column-reverse;
    flex-wrap : wrap-reverse; */
    flex-flow : row-reverse wrap
}

...

- justify-content

중심축을 기준으로 아이템을 어떻게 배치할 것인지 결정할 수 있다.

flex-start(default) : 중심축의 시작부터 배치된다.

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

...

flex-end : 중심축의 끝부터 배치된다.

.container {
    background-color: beige;
    height: 100vh;
    display: flex;
    flex-flow : row nowrap;
    justify-content : flex-end;
}

...

flex-direction이 아이템의 순서를 바꿔줬다면 justify-content는 아이템의 순서는 유지된 채 이동만 한다.

center : 축의 중앙에 배치된다.

.container {
    background-color: beige;
    height: 100vh;
    display: flex;
    flex-flow : row nowrap;
    justify-content : center;
}

...

space-around : 동일한 간격을 갖고 배치된다.

.container {
    background-color: beige;
    height: 100vh;
    display: flex;
    flex-flow : row nowrap;
    justify-content : space-around;
}

...

space-evenly : space-around와 다르게 양쪽 끝도 동일한 간격을 가지고 있다.

.container {
    background-color: beige;
    height: 100vh;
    display: flex;
    flex-flow : row nowrap;
    justify-content : space-evenly;
}

...

space-between : 양쪽 끝에 공간 없이 중간 아이템들만 공간을 갖는다.

.container {
    background-color: beige;
    height: 100vh;
    display: flex;
    flex-flow : row nowrap;
    justify-content : space-between;
}

...

- align-items

justify-content가 중심축에서 아이템 배치를 어떻게 할 것인지 결정하는 것이였다면, align-items는 반대축에서 아이템 배치를 어떻게 할 것인지 결정한다.

flex-start : 아이템이 반대축의 시작점에 배치된다.

.container {
    background-color: beige;
    height: 100vh;
    display: flex;
    flex-flow : row nowrap;
    justify-content : space-between;
    align-items : flex-start;
}

...

flex-end : 아이템이 반대축의 끝점에 배치된다.

.container {
    background-color: beige;
    height: 100vh;
    display: flex;
    flex-flow : row nowrap;
    justify-content : space-between;
    align-items : flex-end;
}

...

center : 아이템이 반대축의 중심에 배치된다.

.container {
    background-color: beige;
    height: 100vh;
    display: flex;
    flex-flow : row nowrap;
    justify-content : space-between;
    align-items : center;
}

...

baseline : 아이템들의 중앙을 기준으로 반대축의 시작점에 배치된다.

.container {
    background-color: beige;
    height: 100vh;
    display: flex;
    flex-flow : row nowrap;
    justify-content : space-between;
    align-items : baseline;
}

...

align-content

반대축을 기준으로 아이템들의 배치를 결정할 수 있다.

flex-start : container의 시작에 아이템들이 배치된다.

.container {
    background-color: beige;
    height: 100vh;
    display: flex;
    flex-flow : row wrap;
    justify-content : space-between;
    align-items : baseline;
    align-content : flex-start;
}

...

flex-end : container의 끝에 아이템들이 배치된다.

.container {
    background-color: beige;
    height: 100vh;
    display: flex;
    flex-flow : row wrap;
    justify-content : space-between;
    align-items : baseline;
    align-content : flex-end;
}

...

center : container의 중앙에 아이템들이 배치된다.

.container {
    background-color: beige;
    height: 100vh;
    display: flex;
    flex-flow : row wrap;
    justify-content : space-between;
    align-items : baseline;
    align-content : center;
}

...

space-between : 위쪽과 아래쪽에 위치한 아이템들은 space-between 속성에 따라 위에 딱 붙어있고 중간 아이템들에 space가 들어가 있다.

.container {
    background-color: beige;
    height: 100vh;
    display: flex;
    flex-flow : row wrap;
    justify-content : space-between;
    align-items : baseline;
    align-content : space-between;
}

...

step 4부터는 2탄에...

[참고자료]

A Complete Guide to Flexbox

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) a…

css-tricks.com

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

'CSS' 카테고리의 다른 글

🎨 CSS 6 \| 그리드(with 드림코드 by 앨리) 2탄 (0)	2022.09.09
🎨 CSS 5 \| 그리드(with 드림코드 by 앨리) 1탄 (0)	2022.09.09
🎨 CSS 4 \| Flexbox (with 드림코드 by 앨리) 2탄 (0)	2022.09.05
🎨 CSS 3 \| CSS 단위 ( %, em, rem, vw, vh ) (0)	2021.12.17
🎨 CSS 1 \| CSS layout (display, position) (0)	2021.12.16

ABOUT ME

🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

Step 1: Background

Step 2 : Flexbox

Step 3 : Flexbox 부모에게 줄 수 있는 속성들 (container)

- display

- flex-direction

row (default) : 아이템들이 왼쪽에서 오른쪽으로 배치된다.

row-reverse : 아이템들이 오른쪽에서 왼쪽으로 배치된다.

column : 아이템들이 위에서 아래로 배치된다.

column-reverse : 아이템들이 아래에서 위로 배치된다.

- flex-wrap

nowrap(default) : 모든 아이템들이 한 줄에 배치된다.

wrap : 아이템들이 자동 줄 바꿈되어 위에서 아래로 배치된다.

wrap-reverse : 아이템들이 자동 줄 바꿈되어 아래에서 위로 배치된다.

- felx-flow

- justify-content

flex-start(default) : 중심축의 시작부터 배치된다.

flex-end : 중심축의 끝부터 배치된다.

center : 축의 중앙에 배치된다.

space-around : 동일한 간격을 갖고 배치된다.

space-evenly : space-around와 다르게 양쪽 끝도 동일한 간격을 가지고 있다.

space-between : 양쪽 끝에 공간 없이 중간 아이템들만 공간을 갖는다.

- align-items

flex-start : 아이템이 반대축의 시작점에 배치된다.

flex-end : 아이템이 반대축의 끝점에 배치된다.

center : 아이템이 반대축의 중심에 배치된다.

baseline : 아이템들의 중앙을 기준으로 반대축의 시작점에 배치된다.

align-content

flex-start : container의 시작에 아이템들이 배치된다.

flex-end : container의 끝에 아이템들이 배치된다.

center : container의 중앙에 아이템들이 배치된다.

space-between : 위쪽과 아래쪽에 위치한 아이템들은 space-between 속성에 따라 위에 딱 붙어있고 중간 아이템들에 space가 들어가 있다.

'CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

Step 1: Background

Step 2 : Flexbox

Step 3 : Flexbox 부모에게 줄 수 있는 속성들 (container)

- display

- flex-direction

row (default) : 아이템들이 왼쪽에서 오른쪽으로 배치된다.

row-reverse : 아이템들이 오른쪽에서 왼쪽으로 배치된다.

column : 아이템들이 위에서 아래로 배치된다.

column-reverse : 아이템들이 아래에서 위로 배치된다.

- flex-wrap

nowrap(default) : 모든 아이템들이 한 줄에 배치된다.

wrap : 아이템들이 자동 줄 바꿈되어 위에서 아래로 배치된다.

wrap-reverse : 아이템들이 자동 줄 바꿈되어 아래에서 위로 배치된다.

- felx-flow

- justify-content

flex-start(default) : 중심축의 시작부터 배치된다.

flex-end : 중심축의 끝부터 배치된다.

center : 축의 중앙에 배치된다.

space-around : 동일한 간격을 갖고 배치된다.

space-evenly : space-around와 다르게 양쪽 끝도 동일한 간격을 가지고 있다.

space-between : 양쪽 끝에 공간 없이 중간 아이템들만 공간을 갖는다.

- align-items

flex-start : 아이템이 반대축의 시작점에 배치된다.

flex-end : 아이템이 반대축의 끝점에 배치된다.

center : 아이템이 반대축의 중심에 배치된다.

baseline : 아이템들의 중앙을 기준으로 반대축의 시작점에 배치된다.

align-content

flex-start : container의 시작에 아이템들이 배치된다.

flex-end : container의 끝에 아이템들이 배치된다.

center : container의 중앙에 아이템들이 배치된다.

space-between : 위쪽과 아래쪽에 위치한 아이템들은 space-between 속성에 따라 위에 딱 붙어있고 중간 아이템들에 space가 들어가 있다.

'CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바