flexbox 1편, 정의 및 사용 방법

보램·2022년 1월 7일

flexbox

flexbox란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다.
flexbox를 1차원 모델이라 부르는 이유는 레이아웃을 다룰 때 한 번에 하나의 차원(행 또는 열)만을 다룬다는 특성 때문이다.

flexbox 만들기

flexbox를 flex 컨테이너라고도 한다.
flex 컨테이너를 만들기 위해서는 컨테이너에 display : flex; 를 적용해야 한다.
기본적으로 행방향으로 정렬함.

flex 적용 X

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>HTML 문서</title>
        <style>
            .item {
                width: 80px; height: 80px;
                background: hotpink;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </body>
</html>

flex 적용 O

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="utf-8">
       <title>HTML 문서</title>
       <style>
           .container {
               display: flex;
           }
           .item {
               width: 80px; height: 80px;
               background: hotpink;
           }
       </style>
   </head>
   <body>
       <div class="container">
           <div class="item">1</div>
           <div class="item">2</div>
           <div class="item">3</div>
       </div>
   </body>
</html>

알아둬야 할 것

flexbox에는 주축(main-axis)과 교차축(cross-axis)가 있다.
사용자는 목적에 따라 주축과 교차축을 바꿔가며 사용할 수 있다.
만약 세로 방향을 주축으로 하기로 결정했다면, 가로 방향이 교차축이 되는 것

flex-direction

flex-direction 속성은 flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다.

row : 기본값. 주축은 행이고 방향은 콘텐츠의 방향과 동일
row-reverse : 주축은 행이고 방향은 콘텐츠의 방향과 반대
column : 주축은 열이고 방향은 콘텐츠의 방향과 동일
column-reverse : 주축은 열이고 방향은 콘텐츠의 방향과 반대

flex-direction : row-reverse 적용

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>HTML 문서</title>
        <style>
            .container {
                display: flex;
                flex-direction: row-reverse;
            }
            .item {
                width: 80px; height: 80px;
                background: hotpink;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </body>
</html>

학습한 인프런 강의

보램

프론트 엔드와 UX 디자인 찍먹 중인 보안 전공생

이전 포스트

position 2편, fixed sticky

다음 포스트