HTML - CSS Flexbox

Jan 18, 2024

Contents

1. 부모 박스 길이 조절 2. 부모 박스 배치 3. 숫자 박스 정렬 4. Flex 세로 정렬 5. flex: 1;6. flex-wrap

💡

Flexbox 는 HTML 공간 내에 자료를 배치하기 위해 사용한다. Flexbox 는 1차원 레이아웃의 배치를 위해 사용된다.

Flexbox Layout 은 가로축 혹은 세로축을 기준으로 배치하는 1차원 레이아웃이다.

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox

Flexbox 의 활용은 w3schools 의 예제를 통해 알아본다. 소스 코드는 위의 주소에 있다.

파란색 부모 박스와 숫자 박스가 있다. 이를 배치해보자.

1. 부모 박스 길이 조절


.flex-container {
            display: flex;
            background-color: DodgerBlue;
            width: 500px;
        }

부모 클래스의 길이를 설정한다. 500px 로 값을 입력할 수 있다.

하지만 브라우저의 크기를 줄이면 박스가 화면 밖으로 벗어난다.

그래서 화면을 줄여도 같은 비율로 남기고 싶다면 % 를 활용한다


.flex-container {
            display: flex;
            background-color: DodgerBlue;
            width: 70%;
        }

화면의 크기와 상관없이 창의 70%만 차지한다.

2. 부모 박스 배치

💡

배치는 부모가 결정한다.

html 에서 배치를 위해서는 부모 박스가 필요하다. 그래서

파란색 박스의 부모 박스를 하나 만든다.


<div class="main">
        <div class="flex-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>

그리고 메인 선택자를 만들어 디스플레이를 flex로 정하고 위치를 센터로 지정한다.


.main {
            display: flex;
            justify-content: center;
        }

3. 숫자 박스 정렬

숫자박스도 부모 박스 flex-container 를 통해 배치할 수 있다.


.flex-container {
            display: flex;
            background-color: DodgerBlue;
            width: 70%;
            justify-content: space-between;
        }

4. Flex 세로 정렬


.flex-container {
            display: flex;
            flex-direction: column;
            background-color: DodgerBlue;
            width: 70%;
            align-items: center;
        }

flex-direction 를 통해 행-열을 조절할 수 있다. 기본 값은 row 로 되어 있고 세로 정렬을 위해서 column 으로 설정한다.

5. flex: 1;

flex: 1; 은 화면 비율에 따라서 비율이 유연하게 적용되는 속성이다.


.flex-container {
            display: flex;
            background-color: DodgerBlue;
            width: 70%;
        }

        .flex-container>div {
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
            flex: 1;
        }

부모 박스 내에서 숫자 박스가 같은 비율로 분할되었다.

6. flex-wrap

flex-wrap 은 요소들의 줄 바꿈을 제어하는 속성을 가진다.

1부터 7까지의 숫자 박스를 만들었다.

브라우저의 창의 크기를 줄이면 남는 부분이 창에서 사라지게 된다.

이때 wrap 을 사용하면 요소들이 줄 아래로 내려가 표시가 된다.


.flex-container {
            display: flex;
            background-color: DodgerBlue;
            width: 800px;
            justify-content: space-between;
            flex-wrap: wrap;
        }

.flex-container { display: flex; background-color: DodgerBlue; width: 70%; } .flex-container>div { background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 30px; flex: 1; }