[CSS] Flexbox : 자식 박스의 방향과 크기 설정

Flexbox란?

Flex(Flexible)는 "잘 구부러지는", "유연한"이라는 뜻의 사전적 의미를 가지고 있다.
Flexbox layout이란 CSS의 display 속성 중 하나로, 수평적으로만 배치되는 것이 원칙인 일반적인 레이아웃(block, inline 등)과 달리 flexbox layout은 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는다. (사이즈를 모르거나 크기가 유동적이어야 하는 상황에서 유용)
Flexbox는 작은 크기의 레이아웃이나 모바일 디바이스에 적합하다. (큰 스케일의 레이아웃 : Grid 속성)

Flexbox 속성

Flexbox 속성은 속성마다 속성을 지정하는 위치가 다르며 부모 요소에 적용해야 하는 속성과 자식 요소에 적용해야 하는 속성으로 구분할 수 있다.

부모 요소에 적용해야 하는 Flexbox 속성

부모 요소에 적용하는 Flexbox 속성은 자식 요소들의 정렬과 관련이 있다.

display: flex (자식 요소 한 줄로 정렬)

display: flex는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법
속성 적용 시 자식 요소들이 왼쪽부터 가로로 정렬되며 내용만큼 공간을 차지한다.

예시

<!DOCTYPE html>
<html lang="ko">
    <head>
        <style>
            main {
                border: 1px dotted red;
                <!-- main의 자식 요소를 flex로 변경 -->
                dispaly: flex;
            }
            div {
                border: 1px solid green;
            }
            * {
                margin: 10px;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <main>
            <div>box1</div>
            <div>box1</div>
            <div>box1</div>
        </main>
    </body>
</html>

flex-direction : 정렬 축 설정

자식 요소들을 정렬할 정렬 축을 설정한다.

default : row (가로 정렬)

부모요소 {
    flex-display: flex;
    flex-direction: row;
}

flex-wrap : 자동 줄 바꿈 설정

자식 요소들의 크기가 부모 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 설정한다.

default : 줄 바꿈 x

justify-content: 자식 요소의 축 수평 방향 정렬

자식 요소들의 축의 수평 방향으로 어떻게 정렬할 것인지 설정한다.
요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할지
세로로 정렬되어 있다면 세로 방향으로 어떻게 정렬할 것인지 정하는 속성

flex-direction : row 인 경우

flex-direction : column 인 경우

자식 요소에 적용해야 하는 Flexbox 속성

자식 요소에 적용하는 Flexbox 속성은 요소가 차지하는 공간과 관련이 있다.

flex 속성의 값

flex 속성에는 다음과 같이 세 가지 값을 지정할 수 있다.

<!-- flex 속성 -->
flex: grow(팽창 지수) shrink(수축 지수) basis(기본 크기)

flex-grow:
flex-shrink:
flex-basis:

<!-- default -->
flex: 0 1 auto;

grow(팽창 지수)

요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지 의미
절대적 크기가 아닌 총합에서의 비율로 팽창

예시

shrink(수축 지수)

요소의 크기가 줄어들어야 할 때 얼마나 줄 것인지 의미 (비율이 클수록 더 많이 줄어든다.)
grow 속성과 shrink 속성을 함께 사용하는 일은 비추천 (shrink 속성은 width나 basis 속성에 따른 비율이므로 실제 크기를 예측하는데 어려움이 있기 때문에)
비율로 레이아웃을 지정할 경우 grow속성에 변화를 주는 방식 추천 (flex-grow 속성으로 비율 변경 시 shrink 속성은 기본값인 1로)

basis(기본 크기)

grow 또는 shrink에 의해 변화하기 전에 가지는 기본 크기를 의미
ex) grow가 0일 때, basis 크기를 지정하면 지정된 크기 유지한다. (flex-grow 속성 값이 0인 경우에만 flex-basis 속성의 값이 유지된다.)
width와 동시에 적용하는 경우 basis가 우선된다.

예시

참고

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

저작자표시 (새창열림)

'WEB > HTML & CSS' 카테고리의 다른 글

[CSS] 박스 모델 (Box Model) : 요소의 크기 (0)	2022.06.30
[CSS] CSS 선택자 종류와 우선순위 (작성중) (0)	2022.06.28
[CSS] box-sizing : 박스 크기 방식 설정 (0)	2022.06.28
[CSS] CSS란? (0)	2022.06.28
[HTML] 시멘틱 태그(Semantic Tag) (0)	2022.06.27