CSS ⭐ ⑥ flex 박스 레이아웃

플렉스 박스 레이아웃은 1차원 방식으로 효과적인 레이아웃을 설계할 수 있도록 고안된 스타일 입니다.
1차원 방식이란, 가로(row) 혹은 세로(column)중 한 방향으로만 레이아웃을 설계하는 방식을 말합니다.

플렉스 박스 레이아웃

구성요소

주축(main axis) : 플렉스 박스의 진행 방향과 수평한 축을 의미
교차축(cross axis) : 주축과 수직한 축을 의미
플렉스 컨테이너 : display 속성값으로 flex나 inline-flex가 적용된 요소를 의미
플렉스 아이템 : 플렉스 컨테이너와 자식 관계를 이루는 태그 구성 요소를 의미

레이아웃 확인 방법

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

display 속성

display: flex; / inline-flex;

👉 flex는 적용된 요소의 다음 요소가 항상 줄 바꿈되고, inline-flex는 다음 요소가 주변에 배치

👉 display 속성이 지정된 요소는 플렉스 컨테이너가 되고, 자식 요소는 플렉스 아이템이 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>flex box</title>
    <style>
     .flex-container {
     width: 300px;
     height: 200px;
     background-color:bisque;
     border: 1px solid black;
     display: flex;
    }

     .flex-item {
     width: 80px;
     height: 50px;
     margin: 2px;
     text-align: center;
     border: 1px solid darkblue;
     color: white;
     background-color: orange;
    }
     .flex-item:nth-child(2n) {
     background-color: orangered;
    }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">item1</div>
        <div class="flex-item">item2</div>
        <div class="flex-item">item3</div>
        <div class="flex-item">item4</div>
    </div>
</body>
</html>

flex-direction 속성

👉플렉스 박스 레이아웃의 주축 방향(진행 방향)을 결정 합니다.

flex-direction: 속성값;

flex-wrap 속성

👉 플렉스 아이템이 컨테이너 영역을 벗어날 때 어떻게 처리 할지 결정 합니다.

flex-wrap: 속성값;

👉 기본 값은 nowrap 입니다. (일정한 크기까지 찌그러지다가 더 이상 공간이 없으면 넘어감)

nowrap

wrap

flex-flow 속성

👉 flex-direction 속성과 flex-wrap 속성을 한 번에 사용할 수 있습니다.

flex-flow: [flex-direction 속성] [flex-wrap 속성];

flex-flow: column nowrap;

플렉스 박스 레이아웃의 정렬 속성

justify-content 속성

👉 플렉스 아이템을 주축 방향으로 정렬할 때 사용하는 속성

justify-content: 속성값;

CSS

.flex-container {
    width: 300px;
    height: 200px;
    background-color:bisque;
    border: 1px solid black;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.flex-item {
    width: 80px;
    border: 1px solid darkblue;
    color: white;
    background-color: orange;
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-item:nth-child(2n) {
    background-color: orangered;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>flex box</title>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">item1</div>
        <div class="flex-item">item2</div>
        <div class="flex-item">item3</div>
        <div class="flex-item">item4</div>
        <div class="flex-item">item5</div>
        <div class="flex-item">item6</div>
        <div class="flex-item">item7</div>
        <div class="flex-item">item8</div>
        <div class="flex-item">item9</div>
    </div>
    
</body>
</html>

flex-start

center

space-between

👉 아이템 사이의 간격을 일정하게 유지하지만 아이템과 컨테이너 사이는 고려하지 않음

space-evenly

align-items, align-content, align-self 속성

👉 align-items 속성은 플렉스 아이템 교차축 방향으로 정렬할 때 사용

👉 플렉스 박스 레이아웃은 기본으로 align-items 속성에 stretch 값이 적용되어 있습니다.

👉 그래서 단순하게 속성에 flex나 inline-flex만 적용해도 아이템이 컨테이너 높이만큼 가득 찹니다.

stretch

flex-start

center

연습문제 - navi 바 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       /* 기본 스타일 초기화 */
        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        }

        /* 네비게이션바 스타일 */
        .navbar {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #333;
        padding: 1rem;
        }

        .navbar a {
        text-decoration: none;
        color: white;
        font-size: 1.2rem;
        }

        .navbar a:hover {
        color: #aaa
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <a href="#">메뉴1</a>
        <a href="#">메뉴2</a>
        <a href="#">메뉴3</a>
        <a href="#">메뉴4</a>
      </nav>
    
</body>
</html>

부모 속성(container)

container(부모) 속성

display: flex 가로로 배치됨 (최대화 특성)
display: inline-flex 가로로 배치되지만 inline 특성을 가짐 (최소화 특성)
flex-direction: 수평, 수직 그리고 시작 위치와 방향을 결정함.
row, row-reverse, column, column-reverse
flex-wrap: 묶음 여부를 결정(줄바꿈), 기본값은 nowrap(공간 없으면 넘침), wrap은 줄바꿈
justify-content: 주축의 정렬 방법을 결정함
flex-start, flex-end, center, space-between, space-evenly
align-content: 교차축에 대한 여러줄에 대한 정렬 방법
flex-start, flex-end, center, space-between, space-around, space-evenly
align-items: 교차축에 대한 한 줄 정렬 방법
flex-start, flex-end, center
flex-flow: flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성(row wrap)

items(자식) 속성

flex-grow: 증가 비율을 조정 함. 기본값은 0
order: 아이템의 순서 지정 가능, 기본값은 0, 숫자가 작을 수록 앞에 표시 됨.
flex-shrink: 감소 너비 비율 지정, 기본값은 1, 0으로 지정하면 container가 줄어 들더라도 찌그러지지 않음.
flex-basis: 기본값은 auto, content의 크기에 영향을 받음, 안받게 할려면 0으로 지정

flex-grow 사용

body {
  width: 500px;
}

.container {
  background-color: royalblue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.container .item {
  width: 100px;
  height: 100px;
  border: 3px dashed red;
  margin: 10px;
  background-color: orange;
  display: flex;
  justify-content:center;
  align-items:center;
}

.container .item:nth-child(3) {
  flex-grow: 1;
  background-color: red;
  border: 3px dashed black;
}

.container .item:nth-child(6) {
  flex-grow: 1;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

항상 중앙에 표시하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>세로로 중앙에 배치하기</title>
    <style>
        * {
            margin: 0;
            box-sizing: border-box;
        }
        body {
            background-image: url(./images/bg5.jpg);
            background-repeat: no-repeat;
            background-position: left top;
            background-size: cover;
            background-attachment: fixed;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh; 
        }
        button {
            background-color: #ccc;
            font-size: 1.2em;
            padding: 1em 2em;
            border: none;
            border-radius: 5px;
            box-shadow: 1px 1px 2px #fff;
        }
    </style>
</head>
<body>
    <button>클릭</button>
</body>
</html>

용어 정리

플렉스 박스 레이아웃

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

플렉스 박스 레이아웃의 정렬 속성

저작자표시 비영리 변경금지

'🎨 Frontend > HTML & CSS' 카테고리의 다른 글

CSS ⑧ 반응형 웹과 미디어 쿼리 (0)	2023.03.20
CSS ⑦ 그리드(grid) 레이아웃 (0)	2023.03.20
CSS ⑤ 웹 폰트, 아이콘 폰트 사용하기 + 실습예제 (0)	2023.03.16
CSS ④ 전환 효과 - (3) 변형 효과(transform) (0)	2023.03.16
CSS ④ 전환 효과 - (2) 애니메이션 속성 (2)	2023.03.15

플렉스 박스 레이아웃

구성요소

레이아웃 확인 방법

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

display 속성

flex-direction 속성

flex-wrap 속성

flex-flow 속성

플렉스 박스 레이아웃의 정렬 속성

justify-content 속성

flex-start

center

space-between

space-evenly

align-items, align-content, align-self 속성

stretch

flex-start

center

연습문제 - navi 바 만들기

부모 속성(container)

container(부모) 속성

items(자식) 속성

flex-grow 사용

항상 중앙에 표시하기

용어 정리

플렉스 박스 레이아웃

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

플렉스 박스 레이아웃의 정렬 속성

'🎨 Frontend > HTML & CSS' 카테고리의 다른 글

검색 태그

티스토리툴바