[HTML+CSS][플렉스 박스 레이아웃] 01 - 플렉스 박스 레이아웃과 기본 속성들

[HTML+CSS][미디어 쿼리] 03 - 미디어 쿼리를 사용해 웹 문서 만들기

[HTML+CSS][미디어 쿼리] 02 - 미디어 쿼리 적용하기 [HTML+CSS][미디어 쿼리] 01 - 미디어 쿼리 이해하기 [HTML+CSS][반응형 웹] 03 - 가변 레이아웃과 가변 요소 [HTML+CSS][반응형 웹] 02 - 가변 그리드 레이아..

onelight-stay.tistory.com

플렉스 박스 레이아웃이 무엇인지 살펴보고

플렉스 박스 레이아웃을 사용하기 위한 기본 속성들에 대해서

알아보도록 하자.

플렉스 박스 레이아웃

그리드 레이아웃을 기본으로 하며

플렉스 박스를 원하는 위치에 배치하는 것이다.

여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있기 때문에

화면 크기에 따라 레이아웃의 배치가 크기를 조절해야 할 때

편리하게 사용할 수 있다.

1) 플렉스 컨테이너(flex container) – 웹 문서에 텍스트나 이미지, 표 등

웹 요소들을 플렉스 하게 사용하려면 먼저 플렉스 컨테이너로 묶어줘야 한다.

2) 플렉스 항목(flex item) – 플렉스 컨테이너에 담기는 웹 요소이다.

3) 주축(main axis) – 플렉스 컨테이너 안에서 플렉스 항목들을 배치하는 기본 방향으로

왼쪽에서 오른쪽으로 수평 방향으로 배치하며

시작 지점을 ‘주축 시작점’, 끝나는 지점을 ‘주축 끝점’ 이라고 한다.

4) 교차축(cross axis) – 추축과 교차되는 방향으로 위에서 아래로 배치하게 되며,

교차축에서 배치가 시작되는 지점을 ‘교차축 시작점’,

배치가 끝나는 지점을 ‘교차축 끝점’이라고 한다.

display 속성 - 플렉스 컨테이너 지정

플렉스 박스 레이아웃을 만들기 전에 배치하려는 웹 요소들이 있을 때

해당 요소들을 감싸는 부모 요소를 만들고

그 부모 요소를 플렉스 컨테이너로 만들어 주는 것이다.

해당 소스는 #container가 플렉스 컨테이너이며

안에 두 개는 플렉스 항목이 된다.

display 속성과 브라우저 접두사

플렉스 박스 레이아웃은 최신 모던 브라우저에서는 모두 지원이 되고

대부분의 구식 버전에서도 지원되지만,

브라우저마다 플렉스 박스를 지원하는 방법이 다르기 때문에

브라우저 접두사를 붙여 사용해야 한다.

display 속성의 경우 접두사가 상당히 복잡하니 참고 바란다.

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

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 항목 가로로 배치하기</title>
    <style>
        #container {
            display: flex;
            /* 기본값이 row인 플렉스 컨테이너 지정 */
            background-color: black;
        }
        .box {
            margin: 7px;
            width: 250px;
            height: 500px;
            background-color: lightgray;
        }
        h2 { padding: 15px;}
    </style>
</head>
<body>
    <div id="container">
        <div id="box1" class="box"><h2>1</h2></div> <!--플렉스 항목-->
        <div id="box2" class="box"><h2>2</h2></div> <!--플렉스 항목-->
        <div id="box3" class="box"><h2>3</h2></div> <!--플렉스 항목-->
    </div>
</body>
</html>

플렉스 항목 가로로 배치하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 항목 세로로 배치하기</title>
    <style>
         #container {
            display: flex;
            flex-direction: column;
            border: black solid 2px;
        }
        .box {
            width: 500px;
            height: 250px;
            background-color: lightgray;
            border: solid black 1px;
        }
        h2 { padding: 15px;}
    </style>
</head>
<body>
    <div id="container">
        <div id="box1" class="box"><h2>1</h2></div> <!--플렉스 항목-->
        <div id="box2" class="box"><h2>2</h2></div> <!--플렉스 항목-->
        <div id="box3" class="box"><h2>3</h2></div> <!--플렉스 항목-->
    </div>
</body>
</html>

플렉스 항목 세로로 배치하기

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

플렉스 항목을 한 줄이나 여러 줄에 걸쳐서 표시할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 항목 왼쪽에서 오른쪽으로 배치하기</title>
    <style>
        #container {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            display: flex;
            -ms-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            border: black 2px solid;
        }
        #container div {
            width: 200px;
            border: solid black 2px;
            background: lightgray;
        }
        h2 {
            font-size: 20px;
            font-weight: bold;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="box1"><h2>1</h2></div>
        <div id="box2"><h2>2</h2></div>
        <div id="box3"><h2>3</h2></div>
    </div>
</body>
</html>

플렉스 항목 왼쪽에서 오른쪽으로 배치하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 항목 왼쪽에서 오른쪽으로 배치하기</title>
    <style>
        #container {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            display: flex;
            -ms-flex-wrap: wrap-reverse;
            -webkit-flex-wrap: wrap-reverse;
            flex-wrap: wrap-reverse;
            border: black 2px solid;
        }
        #container div {
            width: 200px;
            border: solid black 2px;
            background: lightgray;
        }
        h2 {
            font-size: 20px;
            font-weight: bold;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="box1"><h2>1</h2></div>
        <div id="box2"><h2>2</h2></div>
        <div id="box3"><h2>3</h2></div>
    </div>
</body>
</html>

플렉스 항목 오른쪽에서 왼쪽으로 배치하기

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

플렉스 박스를 이용해 항목들을 배치할 때 기본이 되는

방향과 여러 줄 배치 여부를 한꺼번에 지정할 수 있다.

이때 플렉스 방향과 플렉스 줄 배치는 공백문자로 한다.

order 속성 - 플렉스 항목의 배치 순서 바꾸기

order 값이 0이라면 소스에 입력한 순서대로 배치되고

order 값이 숫자로 입력되었을 경우

그 순서에 따라 배치된다.

이때, order 값의 속성은 플렉스 컨테이너가 아닌

플렉스 항목에 입력해야 한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 항목 배치 순서 바꾸기</title>
    <style>
        #container {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            display: flex;
            border: 2px solid black;
        }
        #container div {
            width: 200px;
            border: 2px black solid;
            background: lightgray;
        }
        #box1 {order: 2;} /* 배치순서 설정 */
        #box2 {order: 3;} /* 배치순서 설정 */
        #box3 {order: 1;} /* 배치순서 설정 */
        h2 {
            font-size: 20px;
            font-weight: bold;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="box1"><h2>box1</h2></div>
        <div id="box2"><h2>box2</h2></div>
        <div id="box3"><h2>box3</h2></div>
    </div>
</body>
</html>

플렉스 항목 배치 순서 바꾸기

배우기 전에는 단순히 레이아웃만 잘 하면 되겠지라고 생각했는데

항목들의 배치방법이 이렇게 다양하다니 신기했다.

나중에 써먹어야 겠다.

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

※ 해당 글은 습득 목적으로 작성된 글입니다 ※

저작자표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS][CSS3와 애니메이션] 04 - 애니메이션 (0)	2020.08.12
[HTML+CSS][플렉스 박스 레이아웃] 02 - 플렉스 박스 항목 배치를 위한 속성들 (0)	2020.08.11
[HTML+CSS][미디어 쿼리] 03 - 미디어 쿼리를 사용해 웹 문서 만들기 (0)	2020.08.09
[HTML+CSS][미디어 쿼리] 02 - 미디어 쿼리 적용하기 (0)	2020.08.06
[HTML+CSS][미디어 쿼리] 01 - 미디어 쿼리 이해하기 (0)	2020.08.05

IT Information Notebook

[HTML+CSS][플렉스 박스 레이아웃] 01 - 플렉스 박스 레이아웃과 기본 속성들

플렉스 박스 레이아웃

display 속성 - 플렉스 컨테이너 지정

display 속성과 브라우저 접두사

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

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

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

order 속성 - 플렉스 항목의 배치 순서 바꾸기

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML+CSS][플렉스 박스 레이아웃] 01 - 플렉스 박스 레이아웃과 기본 속성들

플렉스 박스 레이아웃

display 속성 - 플렉스 컨테이너 지정

display 속성과 브라우저 접두사

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

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

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

order 속성 - 플렉스 항목의 배치 순서 바꾸기

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바