CSS-레이아웃Ⅲ: Flex box Layout (플렉스 박스)

[ Flexbox ]

Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 새로운 layout 방식이다.

요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다.

flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것이다.

div 요소는 block 요소이므로 수직 정렬된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox layout ex</title>
    <style>
        .flex-box{ margin: 10px; padding: 15px;
            border-radius: 5px; background: cornsilk;
        }
        .flex-item{ margin: 10px; padding: 20px;
            border-radius: 5px; background: darkviolet;
            color: #fff; text-align: center;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>
</body>
</html>

ㅁㄴㅇㄻㄴㅇㄻㄴㅇㄻㄴㅇㄻㄴㅇㄻㄴㅇㄻㄴㅇㄹ

이를 수평 정렬하려면 자식 요소(flex-item)를 inline-block으로 지정하거나 float 프로퍼티를 지정해야 하는데 각 자식 요소의 너비를 %로 지정하는 등 번거로운 처리가 필요하다.

하지만 Flexbox를 사용하면 이런 번거로움 없이 부모 요소 내에서 균등 수평 정렬할 수 있다.

.flex-box{ 
            display: flex; justify-content: space-around;
        }

[ Flexbox의 속성 ]

1. Flexbox container 속성 (부모 박스)

1-1. flex-direction : 자식 요소를 나열하는 방향 지정

display: flex; flex-direction: row;

속성 값	설명
row (기본값)	좌측에서 우측으로 나열
row-reverse	우측에서 좌측으로 나열
column	위에서 아래로 나열
column-reverse	아래에서 위로 나열

1-2. flex-wrap : 자식 요소를 줄바꿈 방식 지정

display: flex; flex-wrap: no-wrap;

속성 값	설명
no-wrap (기본값)	자식 요소들이 많아도 한줄 안에 배치됨
wrap	자식 요소들이 많으면 다음 줄로 넘침
wrap-reverse	자식 요소들이 많으면 다음 윗 줄로 넘침

1-3. flex-flow : flex-direction과 flex-wrap를 같이 설정할 수 있는 shorthand

display: flex; flex-flow: row no-wrap;

1-4. justify-content : 공간이 남을 때 자식 요소들을 가로정렬 하는 속성

display: flex; justify-content: center;

속성 값	설명
flex-start (기본값)	시작쪽으로 정렬 (보통 왼쪽, flex-direction: row-reverse일 때는 오른쪽)
flex-end	끝쪽으로 정렬 (보통 오른쪽, flex-direction: row-reverse일 때는 왼쪽)
center	중앙으로 정렬
space-between	양쪽 정렬
space-around	요소 좌우 동일 간격

1-5. align-items : 자식 요소들을 세로 정렬하는 속성

display: flex; align-items: center;

속성 값	설명
flex-start	시작쪽으로 정렬 (보통 위쪽, flex-direction: column-reverse일 때는 아래쪽)
flex-end	끝쪽으로 정렬 (보통 아래쪽, flex-direction: column-reverse일 때는 위쪽)
center	세로 중앙으로 정렬
baseline	글자의 baseline 기준으로 정렬
stretch (기본값)	부모 요소의 세로 크기를 따라 확장됨

1-6. align-content : flex-wrap: wrap; 일 경우 여러 줄을 세로 정렬하는 속성

속성은 align-items와 같다.

display: flex; flex-wrap:wrap; align-content: center;

2. Flexbox item 속성 (자식 요소)

2-1. order : 자식 요소들의 순서를 바꿔주는 속성

속성 값	설명
0 (기본값)	순서를 바꾸지 않음
양수	원하는 순서를 지정
음수	좌측으로 자리를 바꾸는 횟수

2-2. flex-grow : 자식 요소가 적거나 크기가 작아 공간이 남을 때 크기를 늘려 채워주는 방법을 정의

속성 값	설명
0	(기본값)
1	항목들이 모두 1이면 같은 크기임
양수	갑을 높게 줄수록 더 늘어남. 공간이 부족할 때는 어떤 값도 무의미

2-3. flex-shrink : 자식 요소가 많거나 크기가 커서 공간이 부족할 때 크기를 줄여 채워주는 방법을 정의

속성 값	설명
0	공간이 부족해도 항목의 크기를 줄일 수 없음 (원래 너비 유지)
1	(기본값) - 자식 요소들이 많아서 컨테이너를 넘치면 안 넘치게 알아서 좁아짐
양수	값을 높게 줄수록 더 좁아짐. 공간이 남을 때는 어떤 값도 무의미

2-4. flex-basis : flex 자식 요소들의 초기 길이를 지정하는 속성

속성 값	설명
auto	(기본값)
~px, ~%	원하는 가로 크기를 부여함

2-5. flex : flex-grow, flex-shrink, flex-basis 속성의 shorthand

W3C에서는 이 속성을 사용하는 것 보다 개별적으로 기술하는 것을 추천하고 있다.

flex: none | auto | [ <flex-grow> <flex-shrink> || <flex-basis> ];

속성 값	설명
flex: 0 1 auto	(기본값)

2-6. align-self : 자식 요소 중 선택된 항목에 대해서만 세로로 다시 정렬하는 속성

flex-box_playground

저작자표시

'CSS' 카테고리의 다른 글

CSS-반응형 레이아웃 (미디어쿼리) (0)	2020.08.27
CSS-레이아웃Ⅱ: float + position (0)	2020.08.27
CSS-요소의 위치 정의 : position (0)	2020.08.26
CSS-레이아웃Ⅰ: float (0)	2020.08.26
CSS-요소의 정렬 : float (0)	2020.08.26

Hrin

CSS-레이아웃Ⅲ: Flex box Layout (플렉스 박스)

[ Flexbox ]