플렉서블 박스 레이아웃

런던행·2020년 7월 30일

CSS Flex

Web Publishing(기초)

목록 보기

9/10

플렉서블 박스 레이아웃 기본속성

display: flex, inline-flex

flex : 플렉스 박스를 박스 레벨 요소로 정의합니다.
inline-flex : 플렉스 박스를 인라인 레벨 요소로 정의합니다.

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

flex-direction: row, row-inverse, column, column-inverse

row: 주축을 가로, 교차축을 세로, 왼쪽에서 오른쪽(inverse는 반대)
column: 주축을 세로, 교차축을 가로, 위에서 아래로 (inverse는 반대)

flex-wrap속성 - 플렉스 항목을 한 줄 또는 여러 줄로 배치하기

flex-wrap: no-wrap, wrap, wrap-reverse

기본적으로 플렉스 항목들은 주축 방향으로 따라 한줄로 배치됩니다. 하지만 flex-wrap속성하면 브라우저 크기가 작아지면 여러 줄에 걸쳐서 표시합니다.

flex-flow 속성 - 플렉스 방향과 여러 줄의 배치를 한꺼번에 저장

flex-flow: <플렉스 방향> <플렉스 줄 배치>

order 속성 - 배치 순서 바꾸기

<html>
<title>

</title>
<style>
    #container {
        display: flex;
    }

    #container div {
        width: 100px;
        border: 1px solid red;
    }
    
    #box1 {
        order:2;
    }
    #box2 {
        order:3;
    }
    #box3 {
        order:1;
    }
</style>

<body>
    <div id="container">
        <div id="box1"><h1>1</h1></div>
        <div id="box2"><h1>2</h1></div>
        <div id="box3"><h1>3</h1></div>
    </div>
</body>

</html>

flex 속성 - 플렉스 항목 크기 조절

flex: flex-grow flex-shrink flex-basis , auto, initial

flex-grow : 플렉스 항목의 너비를 얼마나 늘일지 숫자로 지정
flex-shrink : 플렉스 항목의 너비를 얼마나 줄일지
flex-basis : 플렉스 항목의 기본 크기를 지정
0일 경우, grow와 shrink의 인수값을 함께 사용, auto일 경우, 플렉스 항목의 너비 값을 사용

justify-content 속성 - 주축 기준의 배치방법 지정

justify-content: flex-start, flex-end, center, space-between, space-aroud

align-items, align-self - 교차축 기준의 배치 방법

align-items : stretch | flex-start | flex-end | center | baseline

align-content 속성 - 여러 줄일 때의 배치 방법 지정

런던행

unit test, tdd, bdd, laravel, django, android native, vuejs, react, embedded linux, typescript