[CSS] CSS Flex(Flexible Box) - Container

1. Flex(Flexible Box)의 개념

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

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

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

2. Flex Container 요소의 속성

display	컨테이너를 수직/수평 방향으로 정렬
flex-direction	아이템들의 주축(main-axis) 정렬 방향(수직/수평)을 설정
flex-wrap	아이템들의 줄묶음(줄 바꿈) 설정
justify-content	주축(main-axis)의 정렬 방법을 설정
align-content	교차 축(cross-axis)의 정렬 방법을 설정
align-items	교차 축(cross-axis)의 아이템의 정렬 방법을 설정
align-content는 전체의 정렬 방법이고 align-items는 아이템의 정렬 방법임

3. display

flex	Block 특성으로 컨테이너가 수직 방향 정렬(item들은 inline-block)
inline-flex	Inline 특성으로 컨테이너가 수평 방향 정렬(item들은 inline-block)

<!DOCTYPE html>
<html>
    <body>
        <h2>display 속성</h2>

        <p>flex</p>
        <div class="container flex">
            <div class="item"></div><div class="item"></div><div class="item"></div>
        </div>
        <div class="container flex">
            <div class="item"></div><div class="item"></div><div class="item"></div>
        </div>

        <p>inline-flex</p>
        <div class="container inline-flex">
            <div class="item"></div><div class="item"></div><div class="item"></div>
        </div>
        <div class="container inline-flex">
            <div class="item"></div><div class="item"></div><div class="item"></div>
        </div>
    </body>
</html>

<style>
    div {
        background-color: rgb(200, 200, 200);
        border: 1px dotted rgb(48, 48, 48);
        margin: 2px;
    }
    .container { width: 300px; }
    .item { width: 50px; height: 50px; background-color: yellow; display: inline-block;}

    .flex { display: flex; height: 100px; }
    .inline-flex { display: inline-flex; height: 100px; }
</style>

4. flex-direction

row	아이템을 수평축(왼쪽에서 오른쪽)으로 표시
row-reverse	아이템을 수평 반대축에서부터 표시
column	아이템을 수직축(위에서 아래로)으로 표시
column-reverse	아이템을 수평 반대축에서부터 표시

<!DOCTYPE html>
<html>
    <body>
        <h2>flex-direction</h2>

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

        <p>row-reverse</p>
        <div class="container row-reverse">
            <div class="item">1</div><div class="item">2</div><div class="item">3</div>
        </div>

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

        <p>column-reverse</p>
        <div class="container column-reverse">
            <div class="item">1</div><div class="item">2</div><div class="item">3</div>
        </div>
    </body>
</html>

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

    .container { display: flex; width: 300px; }
    .item { width: 50px; height: 50px; background-color: yellow; display: inline-block;}

    .row { flex-direction: row; height: 100px; }
    .row-reverse { flex-direction: row-reverse; height: 100px; }
    .column { flex-direction: column; height: 200px; }
    .column-reverse { flex-direction: column-reverse; height: 200px; }
</style>

5. flex-wrap

nowrap	모든 아이템을 여러 줄로 묶지 않음(한줄에 표시)
wrap	아이템을 여러 줄로 묶음(여러줄로 표시)
wrap-reverse	아이템을 wrap의 반대 방향으로 여러 줄로 묶음

<!DOCTYPE html>
<html>
    <body>
        <h2>flex-wrap</h2>

        <p>nowrap</p>
        <div class="container nowrap">
            <div class="item">A</div>
            <div class="item">B</div>
            <div class="item">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
        </div>

        <p>wrap</p>
        <div class="container wrap">
            <div class="item">A</div>
            <div class="item">B</div>
            <div class="item">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
        </div>

        <p>wrap-reverse</p>
        <div class="container wrap-reverse">
            <div class="item">A</div>
            <div class="item">B</div>
            <div class="item">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
        </div>
    </body>
</html>

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

    .container { display: flex; width: 300px; }
    .item { width: 50px; height: 50px; background-color: yellow; display: inline-block;}

    .nowrap { flex-wrap: nowrap; width: 200px; }
    .wrap { flex-wrap: wrap; width: 200px; }
    .wrap-reverse { flex-wrap: wrap-reverse; width: 200px; }
</style>

6. justify-content

flex-start	아이템을 시작점으로 정렬
flex-end	아이템을 끝점으로 정렬
center	아이템을 중앙 정렬
space-between	시작 아이템은 시작점, 마지막 아이템은 끝점 정렬 나머지 아이템은 중간 사이에 고르게 정렬
space-around	아이템을 균등한 여백을 포함하여 정렬

<!DOCTYPE html>
<html>
    <body>
        <h2>justify-content</h2>

        <p>flex-start</p>
        <div class="container flex-start">
            <div class="item">A</div><div class="item">B</div><div class="item">C</div>
        </div>
        <p>flex-end</p>
        <div class="container flex-end">
            <div class="item">A</div><div class="item">B</div><div class="item">C</div>
        </div>
        <p>center</p>
        <div class="container center">
            <div class="item">A</div><div class="item">B</div><div class="item">C</div>
        </div>
        <p>space-between</p>
        <div class="container space-between">
            <div class="item">A</div><div class="item">B</div><div class="item">C</div>
        </div>
        <p>space-around</p>
        <div class="container space-around">
            <div class="item">A</div><div class="item">B</div><div class="item">C</div>
        </div>
    </body>
</html>

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

    .container { display: flex; width: 300px;}
    .item { width: 50px; height: 50px; background-color: yellow; display: inline-block;}

    .flex-start { justify-content: flex-start; }
    .flex-end { justify-content: flex-end; }
    .center { justify-content: center; }
    .space-between { justify-content: space-between; }
    .space-around { justify-content: space-around; }
</style>

7. align-content

stretch	컨테이너의 교차 축을 채우기 위해 아이템을 늘림
flex-start	아이템을 시작점으로 정렬
flex-end	아이템을 끝점으로 정렬
center	아이템을 중앙 정렬
space-between	시작 아이템은 시작점, 마지막 아이템은 끝점 정렬 나머지 아이템은 중간 사이에 고르게 정렬
space-around	아이템을 균등한 여백을 포함하여 정렬

<!DOCTYPE html>
<html>
    <body>
        <h2>align-content</h2>

        <p>stretch</p>
        <div class="container stretch">
            <div class="item">A</div>
            <div class="item">B</div>
            <div class="item">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
        </div>

        <p>flex-start</p>
        <div class="container flex-start">
            <div class="item">A</div>
            <div class="item">B</div>
            <div class="item">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
        </div>

        <p>flex-end</p>
        <div class="container flex-end">
            <div class="item">A</div>
            <div class="item">B</div>
            <div class="item">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
        </div>

        <p>center</p>
        <div class="container center">
            <div class="item">A</div>
            <div class="item">B</div>
            <div class="item">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
        </div>

        <p>space-between</p>
        <div class="container space-between">
            <div class="item">A</div>
            <div class="item">B</div>
            <div class="item">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
        </div>

        <p>space-around</p>
        <div class="container space-around">
            <div class="item">A</div>
            <div class="item">B</div>
            <div class="item">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
        </div>
    </body>
</html>

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

    .container { display: flex; width: 200px; height: 200px; flex-wrap: wrap;}
    .item { width: 50px; height: 50px; background-color: yellow; display: inline-block;}

    /* stretch는 item의 높이가 고정 안되어있어야 높이를 알아서 맞춰줌 */
    .stretch { align-content: stretch; }
    .stretch .item { height: unset; }

    .flex-start { align-content: flex-start; }
    .flex-end { align-content: flex-end; }
    .center { align-content: center; }
    .space-between { align-content: space-between; }
    .space-around { align-content: space-around; }
</style>

8. align-items

stretch	컨테이너의 교차 축을 채우기 위해 아이템을 늘림
flex-start	아이템을 시작점으로 정렬
flex-end	아이템을 끝점으로 정렬
center	아이템을 중앙 정렬
baseline	아이템을 문자 기준선 정렬

<!DOCTYPE html>
<html>
    <body>
        <h2>align-items</h2>

        <p>stretch</p>
        <div class="container stretch">
            <div class="item a">A</div>
            <div class="item b">B</div>
            <div class="item c">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
        </div>

        <p>flex-start</p>
        <div class="container flex-start">
            <div class="item a">A</div>
            <div class="item b">B</div>
            <div class="item c">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
        </div>

        <p>flex-end</p>
        <div class="container flex-end">
            <div class="item a">A</div>
            <div class="item b">B</div>
            <div class="item c">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
        </div>

        <p>center</p>
        <div class="container center">
            <div class="item a">A</div>
            <div class="item b">B</div>
            <div class="item c">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
        </div>

        <p>baseline</p>
        <div class="container baseline">
            <div class="item a">A</div>
            <div class="item b">B</div>
            <div class="item c">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
        </div>
    </body>
</html>

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

    .container { display: flex; width: 200px; height: 200px; flex-wrap: wrap;}
    .item { width: 50px; height: 50px; background-color: yellow; display: inline-block;}

    /* stretch는 item의 높이가 고정 안되어있어야 높이를 알아서 맞춰줌 */
    .stretch { align-items: stretch; }
    .stretch .item { height: unset; }

    .a { height: 50px; font-size: 25px; line-height: 50px; }
    .b { height: 20px; font-size: 14px; line-height: 20px; }
    .c { height: 30px; font-size: 30px; line-height: 30px; }

    .flex-start { align-items: flex-start; }
    .flex-end { align-items: flex-end; }
    .center { align-items: center; }
    .space-between { align-items: space-between; }
    .space-around { align-items: space-around; }
</style>

저작자표시

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

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

1. Flex(Flexible Box)의 개념

2. Flex Container 요소의 속성

3. display

4. flex-direction

5. flex-wrap

6. justify-content

7. align-content

8. align-items

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

티스토리툴바