[CSS] CSS Flex(Flexible Box) - Items

1. Flex(Flexible Box)의 개념

- Flex는 요소의 크기가 서로 다르거나 동적인 경우 효율적으로 요소를 정리하기 위해 고안된 레이아웃 방법 중 하나

- Flex는 Container와 Item 두가지 개념이 있다.

Container	Items를 감싸는 부모 요소 박스를 의미
Items	각 요소를 의미하며, 반드시 Container 자식으로 존재해야 함

2. Flex Items 요소의 속성

order	Flex Item의 순서를 설정
flex-grow	Flex Item의 증가 너비 비율을 설정
align-self	교차 축(cross-axis)에서 아이템의 정렬 방법을 설정
flex	flex-grow, flex-shrink.. 축약형
.....

3. order(row, column)

- Flex Item의 순서를 설정

- 숫자가 작을 수록 맨 앞으로 감

숫자	Item의 순서를 설정(default: 0)

<!DOCTYPE html>
<html>
    <body>
        <h2>order row</h2>

        <div class="container" style="flex-direction: row;">
            <div class="item" style="order: 0;">order: 0 1</div>
            <div class="item" style="order: 0;">order: 0 2</div>
            <div class="item" style="order: 0;">order: 0 3</div>
            <div class="item" style="order: 0;">order: 0 4</div>
            <div class="item" style="order: 0;">order: 0 5</div>
        </div>

        <div class="container" style="flex-direction: row;">
            <div class="item" style="order: 1;">order: 1</div>
            <div class="item" style="order: 1;">order: 1</div>
            <div class="item" style="order: 12;">order: 12</div>
            <div class="item" style="order: 0;">order: 0</div>
            <div class="item" style="order: -10;">order: -10</div>
        </div>

        <h2>order column</h2>

        <div class="container" style="flex-direction: column;">
            <div class="item" style="order: 0;">order: 0 1</div>
            <div class="item" style="order: 0;">order: 0 2</div>
            <div class="item" style="order: 0;">order: 0 3</div>
            <div class="item" style="order: 0;">order: 0 4</div>
            <div class="item" style="order: 0;">order: 0 5</div>
        </div>

        <div class="container" style="flex-direction: column;">
            <div class="item" style="order: 1;">order: 1</div>
            <div class="item" style="order: 1;">order: 1</div>
            <div class="item" style="order: 12;">order: 12</div>
            <div class="item" style="order: 0;">order: 0</div>
            <div class="item" style="order: -10;">order: -10</div>
        </div>
    </body>
</html>

<style>
    div {
        background-color: gray;
        border: 1px dotted black;
        margin: 2px;
    }

    .container { width: 600px; min-height: 80px; position: relative; display: flex; }
    .item { width: 100px; height: 60px; background-color: yellow; font-size: 14px;}
</style>

4. flex-grow(row, column)

- 전체 크기부터 계산되고 그 크기에 맞게 비율을 설정

- column으로 할 때는 container의 높이가 지정되어 있어야 함

- flex-grow의 비율은 요소가 채워지고 난 다음의 남은 값들을 가지고 비율을 잡는다.

- 만약 우리가 진짜 원하는 1:1, 1:2를 원한다면 flex-basis:0;을 주면 된다.

숫자	Item의 증가 비율을 설정(default : 0)

<!DOCTYPE html>
<html>
    <body>
        <h2>flex-grow row</h2>

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

        <h2>flex-grow column</h2>

        <div class="container" style="flex-direction: column; height: 300px;">
            <div class="item" style="flex-grow: 1">flex-grow: 1</div>
            <div class="item" style="flex-grow: 1">flex-grow: 1</div>
            <div class="item" style="flex-grow: 1">flex-grow: 1</div>
        </div>
        <div class="container" style="flex-direction: column; height: 300px;">
            <div class="item" style="flex-grow: 1; height: auto;">flex-grow: 1</div>
            <div class="item" style="flex-grow: 2; height: auto;">flex-grow: 2</div>
            <div class="item" style="flex-grow: 3; height: auto;">flex-grow: 3</div>
        </div>
    </body>
</html>

<style>
    div {
        background-color: gray;
        border: 1px dotted black;
        margin: 2px;
    }

    .container { width: 600px; min-height: 80px; position: relative; display: flex; }
    .item { width: 100px; height: 60px; background-color: yellow; font-size: 14px;}
</style>

5. align-self(row, column)

- stretch 일 경우 row일 때 height는 고정이 되면 안되고, column일 때 width가 고정이 되면 안됨

auto	컨테이너의 align-items 속성을 상속받음
stretch	컨테이너의 교차 축을 채우기 위해 아이템을 늘림
flex-start	아이템을 각 줄의 시작점으로 정렬
flex-end	아이템을 각 줄의 끝점으로 정렬
center	아이템을 가운데 정렬

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h2>align-self row</h2>

        <div class="container" style="flex-direction: row; height: 300px;">
            <div class="item stretch" style="align-self: stretch; height: auto;">stretch<br>height: auto</div>
            <div class="item" style="align-self: flex-start;">flex-start</div>
            <div class="item" style="align-self: center;">center</div>
            <div class="item" style="align-self: flex-end;">flex-end</div>
        </div>

        <h2>align-self column</h2>

        <div class="container" style="flex-direction: column;">
            <div class="item stretch" style="align-self: stretch; width: auto;">stretch<br>width: auto</div>
            <div class="item" style="align-self: flex-start;">flex-start</div>
            <div class="item" style="align-self: center;">center</div>
            <div class="item" style="align-self: flex-end;">flex-end</div>
        </div>
    </body>
</html>

<style>
    div {
        background-color: gray;
        border: 1px dotted black;
        margin: 2px;
    }

    .container { width: 600px; min-height: 80px; position: relative; display: flex; }
    .item { width: 100px; height: 60px; background-color: yellow; font-size: 14px;}
</style>

저작자표시

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

[CSS] 반응형 웹(viewport, 미디어 쿼리) (1)	2022.10.13
[CSS] CSS Flex(Flexible Box) - Container (0)	2022.10.12
[CSS] CSS 애니메이션 (0)	2022.10.06
[CSS] CSS 위치 지정 및 화면 중앙 배치 (0)	2022.10.06
[CSS] CSS float, clear 속성 (1)	2022.10.05