CSS_Felx 레이아웃

diary100 2023. 3. 30. 17:41

Flex 란?

수평정렬을 하기 위한 속성, 다양한 속성값과 결합하여 디스플레이를 나타내 보자

●flex-wrap
플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성

1.nowrap : 기본값 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치
2.wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘기기
3.wrap-reverse : 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김 (단, 아래쪽이 아닌 위쪽으로 넘김)

●flex-direction
플렉스 요소들이 배치되는 축의 방향을 결정하는 속성
1.row : 기본값 . 가로로 배치
2.row-reverse : 가로로 배치(반대로)
3.column :세로로 배치되는
4.column-reverse :세로로 배치 (반대로)

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

●justify-content
-플렉스 요소의 수평방향 정렬방식을 설정

1.flex-start:기본값 .앞쪽에서부터 배치
2.flex-end  :뒤쪽에서부터 배치
3.center    :가운데 배치됨
4.space-between : 요소들 사이에 여유공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
5.space-around  : 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)

●align - items
-플렉스 요소의 수직방향 정렬 방식을 결정
1.stretch    : 기본값. 아이템들이 수직축 방향으로 늘어남
2.flex-start : 요소들이 시작점으로 정렬
3.flex-end   : 요소들이 끝으로 정렬
4.center     : 요소들이 가운데로 정렬
5.baseline   : 요소들이 텍스트 베이스라인 기준을 정렬

●align-self
-플렉스 요소의 수직축으로 다른 align 속성값을 설정

●order
-플렉스 요소의 순서를 설정

●align-content
- 플렉스 요소가 설정된 상태에서 요소들이 2줄이상이 되엇을 때 수직방향 정렬방식을 설정
-flex-wrap 의 값을 wrap으로 설정해야함

1.stretch    : 기본값. 위 아래로 늘어남
2.flex-start : 요소들이 시작점으로 정렬
3.flex-end   : 요소들이 끝으로 정렬
4.center     : 요소들이 가운데로 정렬
5.space-between : 요소들 사이에 여유공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
6.space-around  : 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)

●flex-basis
-플렉스 요소의 기본 크기를 설정

1.flex-grow
- 플렉스 요소를 flex-basis의 설정한 값보다 커질 수 있는지 결정하는 속성
2.flex-shrink
- 플렉스 요소를 flex-basis의 설정한 값보다 작아질 수 있는지를 결정하는 속성
3.flex
- flex-grow, flex-shrink, flex-basis를 한 번에 설정할 수 있음

다양한 코드 예시를 통해 알아보자

HTML 코드1

<!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 :nowrap; 기본값
               flex-wrap; :wrap;
               flex-wrap: wrap-reverse;
            */
           /* flex-direction: row;  기본값.*/
            flex-direction: column-reverse;
        }
        #container>div{
            width: 400px;
            border: 1px 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>

결과1

HTML 코드2

<!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: flex-start; 기본값*/
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* justify-content: space-between; */
            justify-content: space-around;
            /*align-items: stretch; 기본값*/
            /*align-items: start; 기본값*/
            /*align-items: end; 기본값*/
            /*align-items: center; 기본값*/
            align-items: baseline;
        }
        #box2{align-self: flex-end;}
        #box1{order: 2;}
        #box2{order: 1;}
        #box3{order: 4;}
        #box4{order: 3;}
        #box5{order: 5;}
    </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

HTML코드3

<!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: start;
        }
    </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>

결과3