글 작성자: 망고좋아
반응형

 

Flexbox란?

  • 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재 정렬되어, 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해준다.
  • 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다.
  • 플렉스 박스(flex box)는 플렉스 컨테이너(flex container)와 플렉스 요소(flex item)로 구성된다.

 

 

container에 적용할 수 있는 속성 값

  1. display
  2. flex-direction
  3. flex-wrap
  4. flex-flow
  5. justify-content
  6. align-items
  7. align-content

 

 

itm에 적용되는 속성 값

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex
  5. align-self

 

 

The flex model

  • main axis
    • 수평축이 기본 축으로 flex item이 배치되고 있는 방향으로 진행하는 축이다.
    • 기본 축의 시작과 끝을 일컬어 main start과 main end라고 부른다.
  • cross axis
    • 교차축으로 flex item이 내부에 배치되는 방향에 직각을 이루는 축이다.
    • 이 축의 시작과 끝을 일컬어 cross start과 cross end라고 한다.
  • 우리가 flex를 설정한 <section>을 flex container라고 부른다.
  • flex container 내부에 flexbox로 레이아웃 되는 항목을 일컬어 flex item이라고 합니다.(<article>)

 

 

flexbox 설정

기본 형태

<!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>
    <link rel="stylesheet" href="[CSS] Flex_Box/style.css">
</head>
<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>
    </div>    
</body>
</html>
.container {
    background: beige;
    height: 100vh; 
}

.item {
    width: 40px;
    height: 40px;
}

.item1 { 
    background: #f44336;
}
.item2 {
    background: #fb8c00;
}
.item3 {
    background: #ffee58;
}
.item4 {
    background: #43a047;
}
.item5 {
    background: #303f9f;
}
.item6 {
    background: #546e7a;
}
.item7 {
    background: #d500f9;
}
.item8 {
    background: #76ff03;
}
.item9 {
    background: #795548;
}
.item10 {
    background: #ffb74d;
}

 

 

1. flexbox 설정 :: display

.container {
    background: beige;
    height: 100vh; 
    display: flex; /* flexbox로 만들어주기 */
}
  • 오른쪽으로 정렬된다.
  • 부모 요소가 inline 요소인 경우 inline-flex을 지정한다. display: inline-flex;

 

 

2. flex-direction

기본값 :: row

flex-direction: row /* 왼쪽에서 오른쪽으로 가능 방향으로 정렬, 기본속성*/
  • flex 컨테이너의 주축(main axis) 방향을 설정한다.
  • 좌에서 우로(ltr) 수평 배치가 기본 값이다.

 

오른쪽에서 왼쪽으로 가능 방향으로 정렬 :: row-reverse

flex-direction: row-reverse; /* */
  • 위에서 중심축은 열(x축, 수평축)이다.
  • 우에서 좌로(rtl) 수평 배치된다.

 

위쪽에서 아래쪽으로 배치 :: column

flex-direction: column;

 

아래쪽에서 위쪽으로 배치 :: column-reverse

flex-direction: column-reverse;
  • 아래에서 위로 올라오게 된다.
  • 메인 축은 수직축이 되고

 

 

3. flex-wrap

flex-wrap: wrap;
flex-wrap: wrap-reverse; /* 거꾸로 반대로 wrapping*/
  • 기본값은 nowrap이다.
  • item들이 많다면 한 줄에 빼곡하게 붙어 있는 것을 볼 수 있다. -> wrapping을 하게 되면 itme이 한 줄에 꽉 차게 되면 자동적으로 다음 줄로 넘어간다.

 

 

4. flex-flow

flex-flow: column nowrap;
  • flex-direction과 flex-wrap을 합한 것

 

 

5. justify-content

justify-items: flex-start; /* 기본 값*/
  • flex container의 main axis를 기준으로 flex item을 수평 정렬한다.
  • 수평축이 중심이라면 왼쪽에서 오른쪽으로 배치가 기본
  • 수직축이 중심이라면 위쪽에서 아래쪽으로 배치가 기본
  • 즉, 중심축에서 itme들을 어떻게 배치하는지 결정하는 것

 

오른쪽 축으로 item들 배치 :: row & flex-end

.container {
    background: beige;
    height: 100vh; 
    display: flex; 
    flex-direction: row;
    flex-wrap: nowrap;

    justify-content: flex-end;
}
  • item의 순서를 유지하되 오른쪽으로 배치

 

column & flex-end

.container {
    background: beige;
    height: 100vh; 
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    justify-content: flex-end;
}

 

row & center

.container {
    background: beige;
    height: 100vh; 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    justify-content: center;
}

 

space-around

.container {
    background: beige;
    height: 100vh; 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    justify-content: space-around;
}
  • 박스를 둘러싸는 space를 넣어주는 것
  • space-evenly : 모두가 똑같은 간격으로 유지
  • space-between : 왼쪽과 오른쪽은 화면에 딱 맞게 배치하고, 중간에만 spaece 추가

 

 

6. align-items

  • flex item을 flex container의 수직 방향(cross axis)으로 정렬한다.
  • 플렉스 요소의 수직 방향 정렬 방식을 설정
  • 반대 축에서 item들을 어떻게 배치하는지 결정하는 속성
  • 기본 값은 align-items: stretch;으로 꽉 찬 높이를 갖는다.

 

align-items: flex-start;

  • 모든 flex item은 flex container의 cross start 기준으로 정렬

 

align-items: flex-end;

  • 모든 flex item은 flex container의 cross end 기준으로 정렬된다.

 

align-items: center

.container {
    background: beige;
    height: 100vh; 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    justify-content: space-between;
    align-items: center;
}
  • justify-content는 중심축에서 item들을 배치하고, align-items는 반대 축에서 item들을 배치한다.

 

align-items: baseline;

.container {
    background: beige;
    height: 100vh; 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    justify-content: space-between;
    align-items: baseline;
}


.item1 { 
    background: #f44336;
    padding: 50px;
}
  • 한 개의 item에 padding이 추가되어서 텍스트의 위치가 혼자 변경되었을 때, 나머지 item들도 균등하게 배치하기 위해서 baseline 사용

 

 

7. align-content

  • flex container의 cross axis를 기준으로 flex item을 수직 정렬한다.
  • flex-wrap 속성의 동작을 변경할 수 있다.
  • align-items 속성과 비슷한 동작을 하지만, 플렉스 요소를 정렬하는 대신에 플렉스 라인을 정렬한다.

align-content: stretch;

  • 모든 flex item은 flex item의 행 이후에 균등하게 분배된 공간에 정렬되어 배치된다. align-content 속성의 기본값이다.

 

align-content: flex-start;

  • 모든 flex item은 flex container의 cross start 기준으로 stack 정렬된다.

 

align-content: flex-end;

  • 모든 flex item은 flex container의 cross end 기준으로 stack 정렬된다.

 

align-content: center;

  • 모든 flex item은 flex container의 cross axis의 중앙에 stack 정렬된다.

 

align-content: space-between;

  • 첫 번째 flex item의 행은 flex container의 상단에 마지막 flex item의 행은 flex container의 하단에 배치되며 나머지 행은 균등 분할된 공간에 배치 정렬된다.
  • 위아래는 딱 붙고 중간에 space가 들어가는 것

 

align-content: space-around;

  • 모든 flex item은 균등 분할된 공간 내에 배치 정렬된다.

 

 

item 속성 값들

1. order :: 잘 사용 안 함

  • item의 순서를 지정

.container {
    background: beige;
    height: 100vh; 
    display: flex;
}

.item {
    width: 40px;
    height: 40px;
}

.item1 { 
    background: #f44336;
    order: 2;
}
.item2 {
    background: #fb8c00;
    order: 2;
}
.item3 {
    background: #ffee58;
    order: 3;
}

 

 

2. flex-grow ****

.flex-item {
  flex-grow: 양의 정수값;
}
  • flex item의 너비에 대한 확대 인자(flex grow factor)를 지정한다,
  • container를 꽉 채우려고 늘어난다.

 

 

3. flex-shrink

  • flex item의 너비에 대한 축소 인자(flex shrink factor)를 지정한다.
  • 즉, container가 작아졌을 때 어떻게 행동할 것인지를 결정하는 속성

 

 

4. flex-basis

  • flex item의 너비 기본값을 px, % 등의 단위로 지정한다. 기본값은 auto이다.
  • item들이 공간을 얼마나 차지해야 하는지 명시할 수 있는 속성

 

5. align-self

.flex-item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
  • align-self 속성은 플렉스 컨테이너의 align-items 속성보다 우선 적용된다.
  • 이 속성을 이용하면 플렉스 요소마다 서로 다른 align 속성 값을 설정할 수 있다.
  • 즉, item별로 item들을 정렬할 수 있다.

 

 

flexbox 연습 사이트

 

 

📌 참고

반응형

'프로그래밍 > CSS' 카테고리의 다른 글

[CSS] position 속성과 사용법 총정리  (0) 2021.10.30
[CSS] media query 사용법  (0) 2021.10.28
[CSS] animation 속성과 사용법  (0) 2021.10.28
[CSS] transition 속성과 사용법  (0) 2021.10.28
[CSS] transform 속성과 사용법  (0) 2021.10.28

티스토리툴바