Home프로그래밍CSSCSS 배우기 – Flex 편 (2020년)
2019.04.07

CSS 배우기 – Flex 편 (2020년)

CSS 레이아웃 property중 flex만큼 powerful한건 없는듯 싶습니다. Flex css를 제대로 배우면, flex 하나면 원하는 레이아웃 디자인을 다 할 수 있습니다. Flex를 쉽게 배우기 위해 준비해 봤습니다. CSS 배우기 flex편 시작합니다.


1. Flex container

container
item
item
item

Flex container 레이아웃 요소에 부여되는 Flex property css는 직계 자손들에게 만 적용이 됩니다. Flex container안에 있는 flex item 요소들이 어떤 방향으로 어떻게 정렬이 되야하는지 레이아웃의 정의를 내려줍니다.



1-1. display

.container { 
    display: flex;
}

display: flex;를 container 요소에게 부여함으로써 이 요소는 flex이고 이 요소 직계 자손들에게 기본 flex item property를 적용하게 됩니다.

flex를 사용하지 않으면 다른 flex property css는 적용이 되지 않습니다.



1-2. flex-direction

.container { 
    flex-direction: row | row-reverse | column | column-reverse;
}

flex container안에 flex item들의 기본 방향을 정해줍니다. 기본값은 flex-direction: row;이고 flex item들을 왼쪽에서 오른쪽 방향으로 정렬하게 됩니다.


Example:

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


flex-direction: row; (기본값)

1
2
3


flex-direction: row-reverse;

1
2
3


flex-direction: column;

1
2
3


flex-direction: column-reverse;

1
2
3


1-3. flex-wrap

.container { 
    flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-wrap의 기본값은 nowrap입니다. 기본으로 모든 item 들을 한줄에 다 넣으려고 합니다. 기본값을 바꿈으로써 item들이 새로운 줄에 wrap하도록 해줍니다.


Example:

<div class="container">
    <div class="item" style="width: 100px;">1</div>
    <div class="item" style="width: 100px;">2</div>
    <div class="item" style="width: 100px;">3</div>
    <div class="item" style="width: 100px;">4</div>
    <div class="item" style="width: 100px;">5</div>
    <div class="item" style="width: 100px;">6</div>
    <div class="item" style="width: 100px;">7</div>
    <div class="item" style="width: 100px;">8</div>
    <div class="item" style="width: 100px;">9</div>
    <div class="item" style="width: 100px;">10</div>
</div>


flex-wrap: nowrap; (기본값)

1
2
3
4
5
6
7
8
9
10

보시다시피, item들의 width가 100px임에도 불구하고, 한줄에 넣으려고 item들의 width를 최대한 줄여서 한줄에 다 끼어 넣으려 합니다.



flex-wrap: wrap;

1
2
3
4
5
6
7
8
9
10


flex-wrap: wrap-reverse;

1
2
3
4
5
6
7
8
9
10


1-4. flex-flow

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

flex-direction 과 flex-wrap을 한줄로 정의 할때 사용하는 css property입니다. 기본값은 flex-flow: row nowrap입니다.



1-4. justify-content

.container { 
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

justify-content는 item들이 사용하고 남은 공간을 어떻게 사용할지 정의 하는 property입니다. justify-content가지고 item들의 고르게 정렬하는데 사용됩니다. 기본값은 flex-start로 item을 오른쪽으로 밀어 정렬합니다.

Note. 아래의 예제는 container가 flex-direction: row;일때을 가정한 예제 입니다. flex-direction: column일때는 기본값인 flex-start가 위로 밀어 정렬하게 됩니다.



Example:

<div class="container">
    <div class="item" style="width: 50px;">1</div>
    <div class="item" style="width: 50px;">2</div>
    <div class="item" style="width: 50px;">3</div>
</div>


justify-content: flex-start; (기본값)

1
2
3

왼쪽 정렬 합니다



justify-content: flex-end;

1
2
3

오른쪽 정렬 합니다



justify-content: center;

1
2
3

중간 정렬 합니다



justify-content: space-between;

1
2
3

item들 사이에 공간을 넣어 고르게 정렬합니다. 1 번과 2 번 사이에 공간을 넣고 2 번과 3 번 사이에 공간을 넣습니다.



justify-content: space-around;

1
2
3

item들 주위에 공간을 넣어줍니다. 1번에 왼쪽과 오른쪽에 같은 공간을 넣어줍니다. 한 item에게 왼쪽 10px, 오른쪽에 10px 정도의 공간이 주어졌다고 가정했을때, 1번과 2번 사이에는 20px의 공간이 차지하게 됩니다. 1번 오른쪽 공간과 2번 왼쪽 공간이 합해지기 떄문입니다.



justify-content: space-evenly;

1
2
3

위에 space-around과 비슷하지만 space-evenly는 모든 item의 왼쪽과 오른쪽 공간의 비율을 1로 잡기때문에 1번의 왼쪽 공간이 10px이라 했을때 1번과 2번사이도 정학히 10px로 잡아줍니다.



1-5. align-content

.container { 
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

justify-content는 item들에게 남은 공간 사용법을 알려준다면, align-content는 라인 (줄)에 정렬을 부여합니다.



Example:

<div class="container" style="height: 250px;">
    <div class="item" style="width: 33.33%;">1</div>
    <div class="item" style="width: 33.33%;">2</div>
    <div class="item" style="width: 33.33%;">3</div>
    <div class="item" style="width: 33.33%;">4</div>
    <div class="item" style="width: 33.33%;">5</div>
    <div class="item" style="width: 33.33%;">6</div>
    <div class="item" style="width: 33.33%;">7</div>
    <div class="item" style="width: 33.33%;">8</div>
    <div class="item" style="width: 33.33%;">9</div>
</div>


align-content: stretch; (기본값)

1
2
3
4
5
6
7
8
9



align-content: flex-start;

1
2
3
4
5
6
7
8
9



align-content: flex-end;

1
2
3
4
5
6
7
8
9



align-content: center;

1
2
3
4
5
6
7
8
9



align-content: space-between;

1
2
3
4
5
6
7
8
9



align-content: space-around;

1
2
3
4
5
6
7
8
9



1-6. align-items

.container { 
    align-items: stretch | flex-start | flex-end | center | baseline;
}

justify-content와 비슷합니다. 기본값은 stretch로 모든 item들이 현재 있는 란인 (줄)에 남아 있는 공백을 채워버립니다.

pinterest와 비슷한 레이아웃을 만들수 있습니다.



Example:

<div class="container">
    <div class="item">1
        <div style="height: 30px;"></div>
    </div>
    <div class="item">2
        <div style="height: 40px;"></div>
    </div>
    <div class="item">3
        <div style="height: 20px;"></div>
    </div>
    <div class="item">4
        <div style="height: 60px;"></div>
    </div>
    <div class="item">5
        <div style="height: 30px;"></div>
    </div>
    <div class="item">6
        <div style="height: 10px;"></div>
    </div>
    <div class="item">7
        <div style="height: 20px;"></div>
    </div>
    <div class="item">8
        <div style="height: 40px;"></div>
    </div>
    <div class="item">9
        <div style="height: 60px;"></div>
    </div>
</div>


align-items: stretch; (기본값)

1
2
3
4
5
6
7
8
9



align-items: flex-start;

1
2
3
4
5
6
7
8
9



align-items: flex-end;

1
2
3
4
5
6
7
8
9



align-items: center;

1
2
3
4
5
6
7
8
9



align-items: baseline;

1
2
3
4
5
6
7
8
9




2. Flex item

container
item
item
item

Flex item들에게 부여되는 flex css property들은 flex container 레이아웃 안에서 자신이 어떻게 정렬되야 하는지 정의를 내립니다.



2-1. order

.item{ 
    order: <integer>;
}

기본값은 0입니다. 기본적으로 HTML에 정의 되어 있는 순서대로 item을 정렬합니다. Order값을 부여해줌으로써 item들 사이중 어디 위치에 있어야 하는지를 정의해 줍니다.



Example:

<div class="container">
    <div class="item" style="order: 99;">99</div>
    <div class="item" style="order: -99;">-99</div>
    <div class="item" style="order: 2;">2</div>
</div>


99
-99
2

Flex item들이 HTML에 99, -99, 2로 정렬되서 정의 되어 있어도, flex container안에서 order의 순서대로 정렬이 됩니다. ‘ -1 < 0 < 1 '



2-2. flex-grow

.item{ 
    flex-grow: <number>;
}

기본값은 0입니다. 기본적으로 item은 필요한 width/height만큼만 커집니다.



Example: flex-grow: 0;

<div class="container">
    <div class="item" style="flex-grow: 0;">1</div>
    <div class="item" style="flex-grow: 0;">2</div>
    <div class="item" style="flex-grow: 0;">3</div>
</div>

1
2
3

모든 item들에게 flex-grow: 0;을 부여 함으로 오른쪽에 남아 있는 공간활용을 하지 않고 item 자신들이 필요한 사이즈만큼만 커집니다.



Example: flex-grow: 1;

<div class="container">
    <div class="item" style="flex-grow: 1;">1</div>
    <div class="item" style="flex-grow: 1;">2</div>
    <div class="item" style="flex-grow: 1;">3</div>
</div>

1
2
3

모든 item들에게 flex-grow: 1;을 부여 함으로 아까 flex-grow: 0;일때 오른쪽에 남아 있는 공간을 다 차지하게 됩니다. 공간 활용에 대한 계산은 아래와 같습니다.

Flex container안에 flex-grow unit을 다 더하면 3이 됩니다. 남아 있던 공간이 300px이였다한다면, 각각 flex item들이 1/3인 100px씩 가지고 가게 됩니다.



Example: flex-grow: 2;

<div class="container">
    <div class="item" style="flex-grow: 1;">1</div>
    <div class="item" style="flex-grow: 2;">2</div>
    <div class="item" style="flex-grow: 1;">3</div>
</div>

1
2
3

자, 이번엔 2번에게만 flex-grow: 2;를 부여하였습니다. Flex-grow unit은 이제 4가 되었습니다. 남아 있던 공간이 300px이라면 1번과 3번은 1/4인 75px만큼 커지고 2번은 2배인 150px을 가지고 가게됩니다.



2-3. flex-shrink

.item{ 
    flex-shrink: <number>;
}

기본값은 1입니다. Flex item들이 동일한 1 비율로 작아 질수 있다는 정의 입니다. Flex-grow는 남아 있는 공간사용에 대한거라면, flex-shrink는 flex item요소에 필요없는 요소 공간에 얼만큼 작아 질수 있는냐에 대한것 입니다. 이해 하기가 어려우실겁니다… 사실, flex-shrink는 혼자 사용되지 않습니다. 대부분 flex-grow와 flex-basis와 같이 적용해 사용합니다. Flex아래에 같이 사용하는 예제를 보여드리겠습니다.



2-4. flex-basis

.item{ 
    flex-basis: <length> | auto;
}

기본값은 auto입니다. Flex item에게 기본 원하는 사이즈를 정의합니다.



Example: flex-basis: <length>;

<div class="container">
    <div class="item" style="flex-basis: 100px;">1</div>
    <div class="item" style="flex-basis: 30px;">2</div>
    <div class="item" style="flex-basis: 60px;">3</div>
</div>

1
2
3



2-5. flex

.item{ 
    flex: none | <flex-grow> <flex-shrink> | <flex-basis> ;
}

기본값은 0 1 auto입니다. 3 가지의 flex item property를 한줄에 정의 할 수 있습니다.



flex: 0 1 auto

기본 값입니다.


flex: 1 0 auto;

flex-grow:1;을 부여해준것과 같습니다. 위의 css를 적용하면, 1 만큼 커집니다.


flex: 1 0 100px;

Flex-basis가 100px임으로, flex item은 기본 사이즈는 100px이고, flex-grow가 1임으로, 1만큼 커질수 있다는겁니다. 여기서 flex-basis의 100px은 min-width: 100px와 같은 의미라 할수 있습니다.


flex: 0 1 100px;

Flex-basis가 100px임으로, flex item은 기본 사이즈는 100px이고, flex-grow가 0임으로 더이상 커질수 없습니다. Flex-shrink가 1이기 때문에 작아 질수는 있다라 정의할수 있게 됩니다. 여기서 flex-basis의 100px은 max-width: 100px와 같은 의미라 할수 있습니다.


2-6. align-self

.item{ 
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

기본값은 auto입니다. Flex container에게 부여되는 align-items는 모든 flex item에게 적용이 됩니다. Align-self를 flex item에게 정의 함으로써 align-items를 override할 수 있습니다.



Example:

<div class="container">
    <div class="item" style="align-self: flex-start;">1</div>
    <div class="item" style="align-self: flex-end;">2</div>
    <div class="item" style="align-self: center;">3</div>
    <div class="item" style="align-self: baseline;">4</div>
    <div class="item" style="align-self: stretch;">5</div>
</div>

1
2
3
4
5



flex css flex 배우기 css 배우기 레이아웃

Related Posts

About The Author

비레인쉐어

Knowledge is Power.

Add a Comment

Your email address will not be published. Required fields are marked *