CSS

CSS[Flexbox]

developer_Michael 2023. 4. 6. 07:55
반응형

Flexbox는 CSS의 레이아웃 모델 중 하나로, 

 

컨테이너와 그 안에 있는 아이템들을 유연하게 배치할 수 있도록 해주는 방법입니다. 

 

Flexbox는 수직 중앙 정렬이나 아이템 간의 간격 조절 등 다양한 레이아웃 요구사항을 쉽게 해결할 수 있습니다.

Flexbox는 display 속성을 이용해서 적용할 수 있습니다. 

 

컨테이너에 display: flex 속성을 주면, 컨테이너 안의 아이템들은 flex item이 되어 배치됩니다. 

 

이때, 컨테이너의 주 축(main axis)과 교차 축(cross axis)이 결정됩니다.

주 축과 교차 축은 flex-direction 속성으로 결정됩니다. 기본값은 row입니다.

주 축과 교차 축을 기준으로 컨테이너와 아이템의 배치를 설정하는 속성들이 있습니다.

-justify-content : 주 축을 기준으로 아이템을 배치합니다.
-align-items : 교차 축을 기준으로 아이템을 배치합니다.
-flex-wrap : 아이템이 한 줄에 다 들어가지 않을 경우 줄바꿈 여부를 설정합니다.
-align-content : 여러 줄의 아이템을 교차 축을 기준으로 배치합니다.


아이템들은 flex-grow, flex-shrink, flex-basis 속성으로 크기를 조정할 수 있습니다.

아래는 예시 코드 블록입니다.

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .item {
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0;
            height: 50px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

위 코드 블록에서는 container 클래스가 flex container가 되어, 내부의 .item 클래스를 flex item으로 배치합니다. 

 

주 축은 flex-direction 속성에 의해 row가 되고, justify-content 속성에 의해 중앙 정렬이 됩니다. 

 

교차 축은 align-items 속성에 의해 중앙 정렬이 됩니다. 

 

.item 클래스에는 flex item의 크기를 결정하는 flex-grow, flex-shrink, flex-basis 속성이 설정되어 있습니다.

반응형