개발/HTML,CSS

2023.03.30 CSS의 레이아웃, 플렉스

상달군 2023. 3. 30. 16:25
728x90

목차

1. CSS의 다단레이아웃

  • column-count (단의갯수)
  • column-rule (단과단사이의 구분선)
  • column-gap (단과 단사이의 여백)
  • column-span(해제)

2. CSS의 플렉스(Flex) 레이아웃

  • flex-wrap (위치결정)
  • flex-direction (축의 방향)
  • flex-flow 
  • justify-content (수평 방향 정렬)
  • align-items (수직방향 정렬)
  • align-self
  • order (요소의 순서)
  • align-content(요소들이 2줄이상 되었을 때 수직방향 정렬방식)
  • flex-basis (기본 크기설정)
  • flex-grow
  • flex-shrink 
  • flex (grow, shrink, basis 한번에 쓰는법)

1. CSS의 다단레이아웃

  • 텍스트를 column 속성으로 다단을 생성
  • 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미
    • column-count: 단의 갯수를 설정
    • column-rule: 단과 단사이의 구분선, 구분의 모양, 두께 색상을 설정
    • column-gap: 단과 단사이의 여백을 설정
    • column-span: 단과 안의 포함된 요소를 다단편집에서 해제 (all을 입력!)
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>다단레이아웃</title>
    <style>
        div, h2, p{margin: 0; padding: 0;}
        h2 {padding: 0 0 20px; text-align: center;}
        div.col {
            text-align: justify;
            padding: 20px;
            background-color: gold;
            border: 3px solid red;

            column-count: 3;
            column-gap: 30px;
            column-rule: 3px dashed red;
        }

        .col > h2 { column-span: all; }
    </style>
</head>
<body>

    <div class="col">
        <h2>다단레이아웃</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex, quam quis. Nihil deserunt optio asperiores placeat excepturi eius aperiam recusandae veritatis velit? Harum aliquam laborum praesentium, rerum optio doloremque reprehenderit.</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex, quam quis. Nihil deserunt optio asperiores placeat excepturi eius aperiam recusandae veritatis velit? Harum aliquam laborum praesentium, rerum optio doloremque reprehenderit.</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex, quam quis. Nihil deserunt optio asperiores placeat excepturi eius aperiam recusandae veritatis velit? Harum aliquam laborum praesentium, rerum optio doloremque reprehenderit.</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex, quam quis. Nihil deserunt optio asperiores placeat excepturi eius aperiam recusandae veritatis velit? Harum aliquam laborum praesentium, rerum optio doloremque reprehenderit.</p>

        
    </div>
</body>

2. CSS의 플렉스(Flex) 레이아웃

  • 수평정렬을 하기 위한 속성
  • 조건 "display: flex" 를 해줘야 사용가능

2-1.flex-wrap

  • 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성
    • nowrap: 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한줄로 배치
    • wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김
    • wrap-reverce: 플렉스 요소의 공간이 없다면 다음줄로 넘김(단, 아래쪽이 아닌 위쪽으로 넘김 )

2-2.flex-direction

  • 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성을 말한다.
    • row: 기본값. 가로로 배치
    • row-reverce:가로로 배치(반대로)
    • column: 세로로 배치
    • column-reverce: 세로로 배치(반대로)
     

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 레이아웃1 </title>
    <style>
        #container{
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            border: 3px solid red;
            display: flex;

            /*flex-wrap*/
            /*flex-wrap: nowrap;/* 기본값 */
            /*flex-wrap: wrap;/* wrap */
            /*flex-wrap: wrap-reverse;/* wrap-reverse */
            
            /*flex-direction*/
            /*flex-direction: row; /* 기본값 */
            /*flex-direction: row-reverse; /* row-reverse */
            /*flex-direction: column; /* column */
            flex-direction: column-reverse; /*column-reverse*/

        }
        #container > div {
            width: 400px;
            border: 3px solid black;
            background-color: gold;

        }
        span{
            font-size: 50px;
            font-weight: bold;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h2>플렉스 레이아웃1</h2>
    <div id="container">
        <div id="box1"><span>1</span></div>
        <div id="box2"><span>2</span></div>
        <div id="box3"><span>3</span></div>
    </div>
</body>
</html>

2-3.flex-flow 

  - flex-wrap과 flex-direction을 한꺼번에 지정할수 있는 속성을 말한다.
        예) flex-flow: row nowrap;

 

2-4.justify-content 

  • 플렉스 요소의 수평방향 정렬방식을 설정
    • flex-start: 기본값. 앞쪽에서부터 배치
    • flex-end: 뒤쪽에서부터 배치
    • center: 가운데 배치됨
    • space-between: 요소들 사이에 여유 공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
    • space-around: 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)

2-5.align-items 

  • 플렉스 요소의 수직방향 정렬 방식을 설정
    • stretch: 기본값. 아이템들이 수직축 방향으로 늘어남
    • flex-start: 요소들이 시작점으로 정렬됨
    • flex-end: 요소들이 끝으로 정렬됨
    • center: 요소들이 가운데로 정렬됨
    • baseline: 요소들이 "텍스트" 베이스라인 기준으로 정렬됨

 2-6.align-self

  • 플렉스 요소에 수직축으로 다른 align 속성값을 설정


 2-7.order

  • 플렉스 요소의 순서를 설정한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 레이아웃 2</title>
    <style>
        .wrapper {
            width: 500px;
            height: 200px;
            /*margin: 0 auto;*/
            border: 3px solid red;

        }
        .wrapper div {
            width: 50px;
            border: 2px solid black;
            background-color: gold;
        }
        #container {
            display: flex;

            /* justify-content */
            /*justify-content: flex-start;/* 기본값 */
            /*justify-content: flex-end;/* flex-end 리버스가 아니다 !!*/
            /*justify-content: center;/* center */
            /*justify-content: space-between;/* space-between */
            /*justify-content: space-around;/* space-around */

            /* align-items */
            align-items: stretch;/* 기본값 */
            /*align-items: flex-start;/* start */
            /*align-items: flex-end;/* flex-end */
            /*align-items: center;/* center */
            /*align-items: baseline ;/* baseline */

        }

        /* align-self */
        #box2 {align-self: flex-end;}

        /* order 
        #box1 {order : 5;}
        #box2 {order : 3;}
        #box3 {order : 2;}
        #box4 {order : 1;}
        #box5 {order : 4;}*/

    </style>
</head>
<body>
    <h2>플레그 레이아웃 2</h2>
    <div id="container" class="wrapper">
        <div id="box1">
            <p>1</p>
        </div>
        <div id="box2">
            <p>2</p>
        </div>
        <div id="box3">
            <p>3</p>
        </div>
        <div id="box4">
            <p style="font-size: 50px;">4</p>
        </div>
        <div id="box5">
            <p>5</p>
        </div>
    </div>
</body>
</html>

2-8.align-content

  • 플렉스 요소가 설정된 상태에서 요소들이 2줄이상 되었을 때 수직방향 정렬방식을 설정
         ✔사용조건 : flex-wrap의 값을 wrap으로 설정 해야 한다 !
    • stretch: 기본값. 위 아래로 늘어남
    • flex-start: 요소들이 시작점으로 정렬됨
    • flex-end: 요소들이 끝으로 정렬됨
    • center: 요소들이 가운데로 정렬됨
    • space-between: 요소들 사이에 여유 공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
    • space-around: 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 레이아웃 3</title>
    <style>
        .wrapper {
            width: 500px;
            height: 200px;
            /*margin: 0 auto;*/
            border: 3px solid red;

        }
        .wrapper div {
            width: 150px;
            border: 2px solid black;
            background-color: gold;
        }
        #container {
            display: flex;
            flex-wrap: wrap;

            /*align-content*/
            /*align-content: stretch;/**/
            /*align-content: flex-start;/*flex-start*/
            /*align-content: flex-end;/*flex-end*/
            /*align-content: center;/*center*/
            /*align-content: space-between;/*space-between*/
            align-content: space-around;/*space-around*/

        }

    </style>
</head>
<body>
    <h2>플레그 레이아웃 3</h2>
    <div id="container" class="wrapper">
        <div>
            <p>1</p>
        </div>
        <div>
            <p>2</p>
        </div>
        <div>
            <p>3</p>
        </div>
        <div>
            <p>4</p>
        </div>
        <div>
            <p>5</p>
        </div>
    </div>
</body>
</html>

 2-9.flex-basis

  • 플렉스 요소의 기본 크기를 설정

2-10. flex-grow

  • 플렉스 요소의 flex-basis의 설정한 값보다 커질 수 있는지를 결정하는 속성

 2-11. flex-shrink

  • 플렉스 요소를 flex-basis의 설정한 값보다 작아질 수 있는지를 결정하는 속성 (flex-grow와 쌍)

2-12. flex

  • flex-grow, flex-shrink, flex-basis를 한번에 설정할 수 있음

 

 

728x90