플렉서블 박스 레이아웃

FE_Log

JunO3O

홈

방명록

전체글

검색

분류 전체보기 (50)

태그 목록

Udemy 공간 분할 CSS 단위 글자 생략 반응 선택자 그레이디언트 수평 레이아웃 아이디 선택자 html one true 레이아웃 display 속성 중앙 레이아웃 후손 선택자 태그 선택자 상태 선택자 자손 선택자 the web developer bootcamp 구조 선택자 목록태그 css 글자 속성 속성 선택자 요소 배치 입력 양식 글자태그 배경 속성 vscode 박스 속성 유동 속성 위치 속성

즐겨찾기

플렉서블 박스 레이아웃

플렉서블 박스 레이아웃

2023. 3. 21. 02:58ㆍCSS

플렉서블 박스 레이아웃(flexible box layout)

# 플렉서블 박스 레이아웃

- 그리드 레이아웃을 기본으로, 플렉스 박스를 원하는 위치에 배치하는 것을 플렉서블 박스 레이아웃이라고 합니다.

- 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있습니다.

1. 플렉스 컨테이너(flex container)

: 웹 문서에 텍스트나 이미지, 표 등 요소들을 플렉서블하게 사용하려면 먼저 플렉스 컨테이너로 묶어 주어야 합니다.

2. 플렉스 항목(flex item)

: 플렉스 컨테이너에 담기는 웹 요소입니다. 위의 그림에서 1~6 번 요소들은 모두 플렉스 항목입니다.

3. 주축(main axis)

: 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향입니다. 기본적으로 주축은 왼쪽에서 오른쪽으로 수평 방향입니다.

: 주축에서 플렉스 항목이 배치되기 시작하는 지점을 '주축 시작점', 배치가 끝나는 지점을 '주축 끝점'이라고 합니다.

4. 교차축(cross axis)

: 교차축은 주축과 교차되는 방향입니다. 기본적으로 위에서 아래로 배치합니다.

: 교차 축에서 배치가 시작되는 지점을 '교차축 시작점', 배치가 끝나는 지점을 '교차축 끝점' 이라고 합니다.

# display 속성

- 배치 요소들을 감싸는 부모 요소를 플렉스 컨테이너로 지정합니다.

- 아래와 같이 사용합니다.

display:flex | inline-flex

속성 값	설명
flex	플렉스 박스를 박스 레벨 요소로 정의합니다.
inline-flex	플렉스 박스를 인라인 레벨 요소로 정의합니다.

<style>
  #container {
    display: flex;
  }
</style>
<div id="container">
  <div></div>
  <div></div>
</div>

# display 속성과 브라우저 접두사

- 최신 모던 브라우저에서는 모두 지원되고 대부분의 구식 버전에서도 지원됩니다.

- 하지만 브라우저마다 플렉스 박스를 지원하는 방법이 달라 브라우저 접두사를 붙여야 합니다.

- 어떤 기기까지 지원을 하느냐에 따라서 브라우저 접두사를 다르게 적용합니다.

.wrapper {
    display:-webkit-box;   /* ios 6 이하, 사파리 3.1 */
    display:-moz-box;   /* 파이어폭스 19 이하 */
    display:-ms-flexbox;   /* IE 10 */
    dipslay:-webkit-flex;   /* 웹킷 구 버전 */
    display:flex;   /* 표준 스펙 */
}

# flex-direction 속성

- 플렉스 항목 배치 방향을 지정합니다.

flex-direction: row | row-inverse | column | column-inverse

속성 값	설명
row	주축을 가로로 교차축을 세로로 지정합니다. 플렉스 항목은 주축 시작점에서 끝점으로(왼쪽에서 오른쪽으로) 배치됩니다.
row-inverse	주축을 가로로 교차축을 세로로 지정합니다. 플렉스 항목은 주축 끝점에서 시작점으로(오른쪽에서 왼쪽으로) 배치됩니다.
column	주축을 세로로 교차축을 가로로 지정합니다. 플렉스 항목은 주축 시작점에서 끝점으로(위쪽에서 아래쪽으로) 배치됩니다.
column-inverse	주축을 세로로 교차축을 가로로 지정합니다. 플렉스 항목은 주축 끝점에서 시작점으로(아래쪽에서 위쪽으로) 배치됩니다.

<!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>Document</title>
  </head>
  <body>
    <style>
      #container {
        display: flex;
        flex-direction: column;
      }
      #container div {
        width: 200px;
        border: 1px solid black;
        background: #ccc;
      }
    </style>
    <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-wrap 속성

- 플렉스 항목을 한 줄 또는 여러 줄로 배치합니다.

flex-wrap: no-wrap | wrap | wrap-reverse

속성 값	설명
no-wrap	플렉스 항목들을 한 줄에 표시합니다. 기본 값입니다.
wrap	플렉스 항목을 여러 줄에 표시합니다.
wrap-reverse	플렉스 항목을 여러 줄에 표시하되 기존 방향과 반대로 배치합니다.

<style>
   #container {
      display:flex;
      flex-wrap:wrap;
   }
</style>

<style>
   #container {
      display:flex;
      flex-wrap:wrap-reverse;
   }
</style>

# flex-flow 속성

- 플랙스 배치 방향과 여러 줄 배치를 한꺼번에 지정합니다.

- 기본 값은 flex-flow:row no-wrap 입니다.

flex-flow : <플렉스 방향> <플렉스 줄 배치>

# order 속성

- 플렉스 항목의 배치 순서를 바꿀 때 사용합니다.

- order 값에 지정된 순서에 따라 배치됩니다.

<style>
  #container {
    display: flex;
  }
  #box1 {
    order: 2;
  }
  #box2 {
    order: 3;
  }
  #box3 {
    order: 1;
  }
</style>
<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>

# justify-content 속성

- 플렉스 항목을 주축 방향으로 배치할 때의 배치 기준입니다.

justify-content:flex-start | flex-end | center | space-between | space-around

속성 값	설명	미리 보기
flex-start	주축의 시작점을 기준으로 배치합니다.
flex-end	주축의 끝점을 기준으로 배치합니다.
center	주축의 중앙을 기준으로 배치합니다.
space-between	첫 번째 플렉스 항목과 마지막 플렉스 항목은 시작점과 끝점에 배치한 후 중앙 항목들은 같은 간격으로 배치합니다.
space-around	모든 플렉스 항목들을 같은 간격으로 배치합니다.

# align-items 속성, align-self 속성

- 교차축을 기준으로 하는 배치 방법을 조절할 수 있습니다.

align-items : stretch | flex-start | flex-end | center | baseline
align-self : auot | stretch | flex-start | flex-end | center | baseline

속성 값	설명	미리 보기
stretch	플렉스 항목을 확장해 교차축을 꽉 채웁니다. 기본 값입니다.
flex-start	교차축의 시작점을 기준으로 배치합니다.
flex-end	교차축의 끝점을 기준으로 배치합니다.
center	교차축의 중앙을 기준으로 배치합니다.
baseline	시작점과 글자 기준선에 가장 먼 플렉스 항목(미리보기에서는 2번 항목의 글자 크기가 가장 크기 때문에 2번의 글자 기준선이 가장 멀리 떨어져 있음)을 시작점에 배치합니다. 그리고 그 글자의 기준선과 다른 항목의 기준선을 맞추어 배치합니다.

# align-content 속성

- 플렉스 항목이 여러 줄로 표시될 때 교차 축 기준의 배치 방법을 지정합니다.

align-content : flex-start | flex-end | center | space-between | space-around

'CSS' 카테고리의 다른 글

반응 / 상태 / 구조 선택자 (0)	2023.03.21
후손 선택자 / 자손 선택자 (0)	2023.03.21
속성 선택자 (0)	2023.03.21
기본 선택자 (0)	2023.03.21
선택자 (0)	2023.03.21