flexbox란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다.

1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한번에 하나의 차원 (행이나 열)만을 다룬다는 특성 때문이다.

기존의 float 과 position은 엄밀히는 레이아웃을 위한 프로퍼티가 아니어서, 표현이 불가능한 레이아웃이 있기도 하고, 구현이 복잡하였다.

웹페이지 구성요소를 배치하기 위해, 기존에는 float/position 기반 레이아웃 설정을 하였으나, 최근에는 flexbox 를 많이 사용하고 있다.

뷰포트나 요소 사이즈가 불명확하거나, 동적으로 변할 때에도 요소를 적절히 배치할 수 있는 기능을 제공한다.

기본 flexbox 만들기

<div style="display:flex;>
 <div class="item"> 하나</div>
 <div class="item"> 둘</div>
 <div class="item"> 셋</div>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    
    .container{
        display: flex;

    }
    .item{
         width: 80px;
         height:80px;
         background-color: blue;
         border: 1px solid red;
       }

   </style>

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

주축과 교차축

KakaoTalk_20220726_101510140.jpg

flex 박스 속성