VII. 반응형 웹과 미디어 쿼리 - 4. 플렉스 박스 레이아웃 알아보기

Hush 2022. 6. 13. 20:31

반응형 웹 디자인에 적합한 그리드 레이아웃을 만드는 방법 중 첫 번째였던 플렉스 박스 레이아웃을 본격적으로 알아보자.

플렉스 박스 레이아웃은 비교적 최근에 등장한 개념으로, 기존의 CSS 속성 외에 새로 공부해야 할 속성이 있다.

플렉스 박스 레이아웃에서 사용하는 용어

플렉스 박스 레이아웃(flex box layout)은 그리드 레이아웃을 기본으로 해서 새로 등장한 개념이므로 알아 두어야 할 새로운 용어가 많다. 이제부터 다음 그림을 참고해 플렉스 박스 레이아웃에서 사용하는 용어를 살펴보자.

플렉스 박스 항목을 배치하는 속성

플렉스 박스에는 플렉스 항목이 여러 개 있는데 일괄적으로 한꺼번에 배치할 수도 있고, 주축이나 교차축 기준으로 다양하게 배치할 수도 있다.

배치 방법과 관련된 속성이 많으므로 처음에는 헷갈리는데 표와 같이 기억해두면 쉽다.

종류	설명
justify-content	주축 방향의 정렬 방법이다
align-items	교차축 방향의 정렬 방법이다.
align-self	교차축에 있는 개별 항목의 정렬 방법이다.
align-content	교차축에서 여러 줄로 표시된 항목의 정렬 방법이다.

플렉스 컨테이너를 지정하는 display 속성

플렉스 박스 레이아웃을 만들려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어 주어야 한다.

즉, 배치할 웹 요소가 있다면 그 요소를 감싸는 부모 요소를 만들고, 그 부모 요소를 플렉스 컨테이너로 만들어야 한다.

이때 특정 요소가 플렉스 컨테이너로 동작하려면 display 속성을 이용해 이 부분에 플렉스 박스 레이아웃을 적용하겠다고 지정해야 한다.

플렉스 컨테이너를 지정하는 display의 속성값은 다음 표와 같다.

종류	설명
flex	컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치한다
inline-flex	컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치한다.

플렉스 방향을 지정하는 flex-direction 속성

플렉스 컨테이너 안에서 플렉스 항목을 배치하는 주축과 방향을 지정하는 속성이다,

사용할 수 있는 속성값은 다음 표와 같다.

종류	설명
row	주축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치한다. 기본값.
row-reverse	주축을 가로로 지정하고 반대로 오른쪽에서 왼쪽으로 배치한다.
column	주축을 세로로 지정하고 위쪽에서 아래쪽으로 배치한다
column-reverse	주축을 세로로 지정하고 아래쪽에서 위쪽으로 배치한다.

다음은 1, 2, 3이라는 숫자가 써 있는 박스 3개를 플렉스 컨테이너로 묶고, 컨테이너 안에 있는 플렉스 항목을 여러 방법으로 배치한 것이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{ display: flex; border: solid 2px; margin:10px;}
        #opt1 { flex-direction: row;}
        #opt2 { flex-direction: row-reverse;}
        #opt3 { flex-direction: column;}
        #opt4 { flex-direction: column-reverse;}
        .box{
            width:100px;
            height:40px;
            margin:5px;
            text-align: center;
            background: black;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container" id="opt1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <div class="container" id="opt2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <div class="container" id="opt3">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <div class="container" id="opt4">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
</body>
</html>

플렉스 항목의 줄을 바꾸는 flex-wrap 속성

flex-wrap 속성은 플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정한다.

속성값으로 wrap이나 wrap-reverse로 지정한 후 웹 브라우저화면의 너비를 늘리거나 줄여 보면 플렉스 컨테이너의 너비에 따라 여러 줄로 표시되는 것을 볼 수 있다.

flex-wrap에서 사용할 수 있는 속성값은 다음과 같다.

종류	설명
nowrap	플렉스 항목을 한 줄에 표시한다. 기본값
wrap	플렉스 항목을 여러 줄에 표시한다.
wrap-reverse	플렉스 항목을 여루 줄에 표시하되, 시작점과 끝점이 바뀐다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{ display: flex; border: solid 2px; margin:10px;}
        .imageblock {border: solid 1px;}
        #opt1 {flex-wrap: nowrap;}
        #opt2 {flex-wrap: wrap;}
        #opt3 {flex-wrap: wrap-reverse;}
        .box{
            width:100px;
            height:40px;
            margin:5px;
            text-align: center;
            background: black;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container" id="opt1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    <div class="container" id="opt2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    <div class="container" id="opt3">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
</body>
</html>

배치 방향과 줄 바꿈을 한꺼번에 지정하는 flex-flow 속성

flex-flow속성은 flex-direction 속성과 flex-wrap 속성을 한꺼번에 지정하여 플렉스 항목의 배치 방향을 결정하거나 줄을 바꾼다.

기본값은 row nowrap이다.

예시는 다음과 같다.

#opt1 {flex-flow: row wrap;}
#opt2 {flex-flow: row nowrap;}

주축 정렬 방법을 지정하는 justify-content 속성

justify-content 속성은 주축에서 플렉스 항목 간의 정렬 방법을 지정한다. 사용할 수 있는 justify-content의 속성값은 다음 표와 같다.

종류	설명
flex-start	주축의 시작점에 맞춰 배치한다.
flex-end	주축의 끝점에 맞춰 배치한다
center	주축의 중앙에 맞춰 배치한다
space-between	첫 번째 항목과 끝 항목을 주축의 시작점과 끝점에 배치한 후 나머지 항목은 그 사이에 같은 간격으로 배치한다.
space-around	모든 항목을 주축에 같은 간격으로 배치한다.

예시를 보는게 훨씬 이해가 잘 될것이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{ display: flex; border: solid 2px; margin:10px;}
        .imageblock {border: solid 1px;}
        #opt1 {justify-content: flex-start;}
        #opt2 {justify-content: flex-end;}
        #opt3 {justify-content: center;}
        #opt4 {justify-content: space-between;}
        #opt5 {justify-content: space-around;}
        #opt6 {justify-content: space-evenly;}
        .box{
            width:100px;
            height:40px;
            margin:5px;
            text-align: center;
            background: black;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container" id="opt1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <div class="container" id="opt2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <div class="container" id="opt3">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <div class="container" id="opt4">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <div class="container" id="opt5">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <div class="container" id="opt6">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>

</body>
</html>

교차축 정렬 방법을 지정하는 align-items 속성

justify-content 속성이 주축에서 항목을 정렬하는 방법이라면 align-items속성은 교차축을 기준으로 플렉스 항목으 정렬한다.

align-items의 속성값은 다음 표와 같다.

종류	설명
flex-start	교차축의 시작점에 맞춰 배치한다.
flex-end	교차축의 끝점에 맞춰 배치한다.
center	교차축의 중앙에 배치한다
baseline	교차축의 문자 기준선에 맞춰 배치한다
stretch	플렉스 항목을 늘려 교차축에 가득 차게 배치한다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{ display: flex; border: solid 2px; margin:10px; height: 150px;}
        .imageblock {border: solid 1px;}
        

        .box{
            padding: 10px 40px;
            margin:5px;
            text-align: center;
            background: black;
            color: white;
        }
        #opt1 {align-items: flex-start;}
        #opt2 {align-items: flex-end;}
        #opt3 {align-items: center;}
        #opt4 {align-items: baseline;}
        #opt5 {align-items: stretch;}
    </style>
</head>
<body>
    <div class="container" id="opt1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <div class="container" id="opt2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <div class="container" id="opt3">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <div class="container" id="opt4">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <div class="container" id="opt5">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>


</body>
</html>

특정 항목만 정렬 방법을 지정하는 aling-self 속성

align-item 속성은 교차축을 기준으로 플렉스 항목의 정렬 방법을 결정하지만 그중에서 특정 항목만 지정하고 싶다면 align-self 속성을 사용한다.

그래서 align-item 속성은 플레긋 컨테이너를 지정하는 선택자에서 사용하지만 align-self 속성은 플렉스 항목 선택자에서 사용한다.

align-self 속성에서 사용하는 값은 align-items 속성에서 사용하는 값과 같다.

다음 예제를 보면 플렉스 컨테이너(.container)에서 교차축의 플렉스 항목들을 중앙에 배치했다.

하지만 1번 상자(#box1)는 별도로 교차축의 시작점에배치하고 3번 상자(#box3)는 교차축에 가득 차도록 늘렸다.

2번, 4번 상자는 속성값을 따로 지정하지 않았다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{ display: flex; border: solid 2px; margin:10px; height: 150px;}
        .imageblock {border: solid 1px;}
        

        .box{
            padding: 10px 40px;
            margin:5px;
            text-align: center;
            background: black;
            color: white;
        }
        #opt1 {align-items: center;}
        #box1 {align-self:flex-start;}
        #box3 {align-self:stretch;}
    </style>
</head>
<body>
    <div class="container" id="opt1">
        <div class="box" id="box1">1</div>
        <div class="box">2</div>
        <div class="box" id="box3">3</div>
        <div class="box">4</div>
    </div>

    </div>


</body>
</html>

여러 줄일 때 교차축 정렬 방법을 지정하는 align-content 속성

주축에서 줄 바꿈이 생겨서 플렉스 항목을 여러 줄로 표시할 때 align-content 속성을 사용하면 교차축에서 플렉스 항목 간의 간격을 지정할 수 있다.

종류	설명
flex-start	교차축의 시작점에 맞춰 배치한다.
flex-end	교차축의 끝점에 맞춰 배치한다.
center	교차축의 중앙에 맞춰 배치한다.
space-between	첫 번째 항목과 끝 항목을 교차점의 시작점과 끝점에 맞추고 나머지 항목은 그 사이에 같은 간격으로 배치
space-around	모든 항목을 교차축에 같은 간격으로 배치
stretch	플렉스 항목을 늘려서 교차축에 가득 차게 배치

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: flex; 
            border: solid 2px; 
            margin:10px; 
            height: 150px;
            flex-flow: row wrap;
        }
        .imageblock {border: solid 1px;}
        

        .box{
            padding: 10px 55px;
            margin:5px;
            text-align: center;
            background: black;
            color: white;
        }

        #opt1 {align-content: flex-start;}
        #opt2 {align-content: flex-end;}
        #opt3 {align-content: center;}
        #opt4 {align-content: space-between;}
        #opt5 {align-content: space-around;}
        #opt6 {align-content: stretch;}
    </style>
</head>
<body>
    <div class="container" id="opt1">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    <div class="container" id="opt2">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    <div class="container" id="opt3">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    <div class="container" id="opt4">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    <div class="container" id="opt5">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
    <div class="container" id="opt6">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>



</body>
</html>

플렉스 레이아웃을 활용해 항상 중앙에 표시하기

그동안 CSS를 사용해서 화면 요소를 세로 방향으로 중앙에 배치하는 것이 까다로웠는데 플렉스 박스 레이아웃을 사용하면 간단해진다.

이제 요소를 화면 중앙에 배치하려면

"화면 중앙에 배치할 요소"의 부모 요소에 display:flex 속성을 부여하고

화면 중앙에 배치할 요소에 justify-conetne: center; align-items: center; 속성을 부여하면

요소가 화면 중앙에 배치된다.

Flex 아이템의 크기를 제어하는 flex-basis, flex-grow, flex-shrink, 그리고 flex

flex-bases

Flex 아이템의 기본 크기를 설정한다.

(flex-direction이 row일 때는 너비, column일 때는 높이)

.item {
	flex-basis: auto; /* 기본값 */
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
}

기본값은 해당 아이템의 원래 크기를 사용한다.

우리가 특별히 지정하고 싶다면 지정해주면된다.

flex-grow

flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다.

flex-grow에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 확장가능한 박스로 변하고, 원래의 크기보다 커지며 빈 공간을 메우게 된다.

기본값은 0이기에, 따로 적용하기 전까지는 container의 공간이 남아도 아이템이 늘어나지 않는다.

.item {
	flex-grow: 1;
	/* flex-grow: 0; */ /* 기본값 */
}

flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 각 아이템들이 flex-grow에 지정된 숫자의 비율로 나누어 가진다고 생각하면 된다.

flex-shrink

아이템이 flex-basis의 값보다 작아질 수 있는지를 결정하는 속성이다.

숫자의 의미는 flex-grow와 같다.

다만 기본값이 1이기 때문에 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있다.

flex

상술한 세 개의 속성을 한번에 쓸 수 있는 속성이다.

flex-grow flex-shrink flex-basis 순으로 값을 전달하면 된다.

.item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 500px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}

저작자표시 (새창열림)