[CSS] 5-1. FlexBox layout

지금까지 float 로 요소들을 수평배치하는 것을 공부했다면 이제 Flex Box 에 대해 알아보겠습니다

👉 플렉스박스는 1차원 레이아웃을 구축하기 위한 관련 CSS 속성들의 집합입니다.

👉 플렉스박스의 주요 아이디어는 컨테이너 요소 내부의 빈 공간을 자식 요소들이 자동으로 나눠 가질 수 있다는 것입니다.

👉 플렉스박스를 사용하면 부모 컨테이너 내에서 항목들을 수평과 수직 방향으로 쉽게 정렬할 수 있습니다.

👉 플렉스박스는 수직 중앙 정렬이나 동일한 높이의 열 만들기와 같은 일반적인 문제들을 해결합니다.

👉 플렉스박스는 float를 대체하기에 완벽하며, 더 적고 깔끔한 HTML과 CSS 코드를 작성할 수 있게 해줍니다

부모 요소 Flex container 안에 있는 자식요소들을 Flex items 라고 하고

container 와 items 간의 사용할 수 있는 속성들이 다르다.

Flex container

(볼드체가 기본값)

gap: 0 | <length>
마진을 사용하지 않고 아이템 사이에 공간을 만들 때 사용합니다.
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
주축(기본적으로 가로 방향)을 따라 아이템들을 정렬합니다.
align-items: stretch | flex-start | flex-end | center | baseline
교차축(기본적으로 세로 방향)을 따라 아이템들을 정렬합니다.
flex-direction: row | row-reverse | column | column-reverse
주축의 방향을 정의합니다.
flex-wrap: nowrap | wrap | wrap-reverse
아이템들이 너무 클 경우 새로운 줄로 넘어갈 수 있게 합니다.
align-content: stretch | flex-start | flex-end | center | space-between | space-around
flex-wrap: wrap이 적용된 경우에만 사용되며, 여러 줄이 있을 때 적용됩니다.

Flex items

(볼드체가 기본값)

align-self: auto | stretch | flex-start | flex-end | center | baseline
개별 flex 아이템에 대해 align-items 속성을 재정의할 때 사용합니다.
flex-grow: 0 | <integer>
요소가 늘어날 수 있도록 허용합니다 (0은 늘어나지 않음, 1 이상은 늘어남을 의미).
flex-shrink: 1 | <integer>
요소가 줄어들 수 있도록 허용합니다 (0은 줄어들지 않음, 1 이상은 줄어듦을 의미).
flex-basis: auto | <length>
width 속성 대신 아이템의 너비를 정의합니다.
flex: 0 1 auto | <int> <int> <len>
flex-grow, flex-shrink, flex-basis를 위한 권장되는 축약형 속성입니다.
order: 0 | <integer>
아이템들의 순서를 제어합니다. -1은 아이템을 첫 번째로, 1은 마지막으로 만듭니다.
물론 -1이하 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>Flexbox</title>
    <style>
      .el--1 {
        background-color: blueviolet;
      }
      .el--2 {
        background-color: orangered;
      }
      .el--3 {
        background-color: green;
        height: 150px;
      }
      .el--4 {
        background-color: goldenrod;
      }
      .el--5 {
        background-color: palevioletred;
      }
      .el--6 {
        background-color: steelblue;
      }
      .el--7 {
        background-color: yellow;
      }
      .el--8 {
        background-color: crimson;
      }

      .container {
        /* STARTER */
        font-family: sans-serif;
        background-color: #ddd;
        font-size: 40px;
        margin: 40px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="el el--1">HTML</div>
      <div class="el el--2">and</div>
      <div class="el el--3">CSS</div>
      <div class="el el--4">are</div>
      <div class="el el--5">amazing</div>
      <div class="el el--6">languages</div>
      <div class="el el--7">to</div>
      <div class="el el--8">learn</div>
    </div>
  </body>
</html>

1. flex box 적용

위와 이미지가 있을 경우, flex container 에 (부모요소) display: flex; 를 주면 자동으로 수평배치가 됩니다

    <style>
      .container {
        font-family: sans-serif;
        background-color: #ddd;
        font-size: 40px;
        margin: 40px;
        
        /* FLEXBOX */
        display: flex;
      }
    </style>

그리고 녹색 백그라운드 색상의 CSS 에 height: 150px; 로 높이가 설정되어 있어서 150px 를 기준으로

다른 요소들도 같은 높이가 적용되었습니다.

2. flex box - 수직 정렬 ( 높이 )

컨테이너 클래스 이하의 div 들을 flex items 라고 하는데요

align-items 속성으로 이 자식 요소들의 높이를 조절할 수 있습니다

자세한 설명은 이하 링크를 참고하시면 됩니다

https://developer.mozilla.org/ko/docs/Web/CSS/align-items

align-items - CSS: Cascading Style Sheets | MDN

CSS align-items 속성은 모든 직계 자식에 대해 align-self값을 그룹으로 설정합니다. 플렉스박스의 교차축을 따라 아이템을 정렬합니다. 그리드 레이아웃의 그리드 영역내 블록 축을 따라 아이템을 정

developer.mozilla.org

align-items: stretch; 가장 긴 요소만큼 나머지 높이 자동으로 맞춰집니다

3. flex box - 좌우 정렬

좌우 정렬을 위해서는 justify-content 속성을 사용하면 됩니다.

https://developer.mozilla.org/ko/docs/Web/CSS/justify-content

justify-content - CSS: Cascading Style Sheets | MDN

CSS의 justify-content 속성은 브라우저가 콘텐츠 항목 사이와 주변의 공간을 플렉스 컨테이너에서는 main-axis, 그리고 그리드 컨테이너에서는 인라인 축을 기준으로 어떻게 정렬할 것인지를 정의합니

developer.mozilla.org

align-items: center; justify-content : center;

space-between : 좌우 간격 없음
space-around : 좌우 끝 간격이 단어 사이 간격을 절반을 반영space-between
space-evenly : 좌우 끝 간격도 단어 사이 간격과 동일

출처 : udemy 강의 Learn modern HTML5, CSS3 and web design by building a stunning website for your portfolio! Includes flexbox and CSS Grid By Jonas Schmedtmann

'CSS' 카테고리의 다른 글

[CSS] 5-2. CSS GRID (0)	2024.10.22
[CSS] ::before 에서 각자 다른 content text 를 주는 법 (content: attr( ) ) (0)	2024.10.10
[CSS] 블록 서식 문맥이란 ? ( Block Formatting Context, BFC ) (0)	2024.10.02
[CSS] 4. 포지셔닝 ( position , float, clear) 과 float layout (0)	2024.10.01
[CSS] 3. 레이아웃 스타일 - 인라인, 블록, 인라인블록 (0)	2024.09.26

Develog