Flexbox 입문

이민영 (minyoung2@nts-corp.com)

주선미 (newhippy@nts-corp.com)

.box{
    display: table;
}

.icon{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.box{
    position: relative;
}

.icon{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 400px;
    height: 400px;
}
.box{
    position: relative;
}

.icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: 
    translate(-50%,-50%);
}

어떤 레이아웃 일까요?

중앙정렬 

.box{
    display: flex;
}

.icon{
    margin: auto;
}

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

어떤 레이아웃 일까요?

flex를 사용하지 않은 코드

.box{
    display: table;
}

.icon{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.box{
    position: relative;
}

.icon{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width,height: 고정 값
}
.box{
    position: relative;
}

.icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: 
    translate(-50%,-50%);
}
.box{
    display: flex;
}

.icon{
    margin: auto;
}

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

flex를 사용한 코드

flex를 사용하면 쉽고 간단하게 레이아웃을 만들 수 있다.

목차

1. 개념

    - Flexbox 란?

2. 활용

    - Flexbox로 레이아웃 만들기

3. 기대효과

    - Flexbox를 사용하면 뭐가 좋을까?

1. Flexbox 란?

뷰 포트 및 엘리먼트의

크기가 불명확하거나 동적인 경우에도

공간을 배치, 정렬 및 분산하는

효율적인 방법을 제공하는 CSS3의 새로운 레이아웃 방식

Flexbox 란?

부모요소인 flex container와 자식요소인 flex item으로 구성된다.

Flexbox 주요특징 1

<ul class="container">
	<li class="item">item 1</li>
	<li class="item">item 2</li>
	<li class="item">item 3</li>	
</ul>
<ol class="container">
	<li class="item">item 1</li>
	<li class="item">item 2</li>
	<li class="item">item 3</li>	
</ol>

flex container의 주축과 교차축은 정렬 및 순서에 중요한 역할을 합니다.

Flexbox 주요특징 2

전체적인 정렬이나 흐름에 관련된 속성은 flex container에 정의하고, item의 크기나 순서 관련된 속성은 flex item에 정의한다.

Flexbox 주요특징 3

2. Flexbox로 레이아웃 만들기

https://goo.gl/7oc2G2

https://goo.gl/devp2b

실습 자료

강의 자료

Flexbox 사용방법

.container{
    display: flex;
}
<ul class="container">
    <li class="item">item 1</li>
    <li class="item">item 2</li>
    <li class="item">item 3</li>	
</ul>

html

css

flex-direction

Flexbox 기본속성

row(기본값)

row-reverse

X축이 주축이 되고, 왼쪽에서 오른쪽로 수평정렬 된다.

X축이 주축이 되고, row와 반대 반향으로 수평정렬 된다.

1         2         3

3         2         1

flex-direction

Flexbox 기본속성

column-reverse

Y축이 주축이 되고, column과 반대 방향으로 수직정렬 된다.

column

Y축이 주축이 되고, 위에서 아래로 수직정렬 된다.

3

 

2

 

1

1

 

2

 

3

실습 1) 수직정렬 레이아웃 만들기

https://codepen.io/min00700/pen/gQGdNp

구조

.header

.tablist

.content

.wrap



 <div class="wrap">
    <div class="header">header</div>
    <div class="tablist">tablist</div>
    <div class="filter">filter</div>
    <div class="content">content</div>
 </div>

html

.filter

조건

- flex를 사용하여 수직정렬을 한다.

.wrap{
    display: flex;
    flex-direction: column;
}

css

2단계. 수직 정렬하기

1단계. flex 레이아웃 만들기

.wrap{
    display: flex;
}

css

Flexbox 기본속성

.item{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

css

flex-grow

flex-shrink

flex-basis

확장

축소

크기

 flex-grow와 flex-shrink 속성을 잘 활용하는 것이 중요하다.

0 (기본값)

item을 확장시키지 않고, 원래 크기를 유지.

flex-grow :

0

1

1

1

1

container의 크기에 따라 item의 크기를 확장시키고 싶다면 1이상의 값을 선언.

Flexbox 기본속성

0

flex-shrink:

0

1 (기본 값)

1

1

item을 축소시키지 않고, 원래 크기를 유지.

container의 크기에 따라 item의 크기를 축소시키고 싶다면 1이상의 값을 선언.

Flexbox 기본속성

flex-basis

Flexbox 기본속성

가나다라

200px

가나다라

auto(기본값), 0

50%

가나다라

.content{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

css

.content{
    flex: 1 1 0;
}

css

.content{
    flex: 1;
}

css

- 모두 동일한 flex 속성값을 나타낸다.

Flex 단축속성

flex: 1 1 0 = flex: 1   

flex: 1 1 0

flex: X 1 0 = flex: X   

flex: X 1 0

flex: 2 1 0 = flex: 2   

flex: 2 1 0

flex: 3 1 0 = flex: 3   

flex: 3 1 0

.

.

.

- 공간을 일정한 비율로 나눠가지면서 늘어나고 줄어드는 상태

flex: 1 1 0

flex : 1

flex-grow: 1

flex-shrink: 1

flex-basis: 0

flex: 1

=

=

Flex 단축속성

- 공간을 일정한 비율로 나눠가지면서 늘어나고 줄어드는 상태

flex: 2 1 0

flex : 2

flex-grow: 2

flex-shrink: 1

flex-basis: 0

flex: 2

=

=

Flex 단축속성

실습 2) 스크롤 없는 100% 레이아웃

https://codepen.io/min00700/full/Jerxej/

https://new.land.naver.com/

.content


 <div class="content">
    <div class="aside">aside</div>
    <div class="main">main</div>
 </div>

html

.aside

.main

조건

- header, filter, tablist를 제외한 wrap 영역을 모두 content로 채운다.

- aside와 main의 너비는 1 대 2의 비율을 가진다.

-aside의 최대너비는 400px이다.

구조

.content{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

css

1단계. content 확장시키기

.content{
    flex: 1;
}

.content{
    flex: 1 1 0;
}

.content{
    display: flex;
     /* flex-item이 flex-container도 될 수 있다. */
    flex: 1;
}

2단계. 중첩 flex 레이아웃 만들기

css

.aside{
    flex: 1;
    max-width: 400px;
}
.main{
    flex: 2;
}

css

4단계. aside와 main 확장하기

.content{
    display: flex;
    flex: 1;
    /* flex-direction: row 생략가능 */
}

css

3단계. 수평 정렬하기

- 확장 되지도 축소 되지도 않는다. 공간에 영향을 받지 않고,      원래의 크기를 유지한다.

flex : none ( 0 0 auto )

Flex 단축속성

Flex에서 margin : auto

- flex에서 margin: auto 속성을 사용하면 item을 간단히 수평정렬할 수 있다.

margin-right: auto

       오른쪽의 모든 공간을 차지하기 위해, item을 오른쪽에서 왼쪽으로 민다.

margin-left: auto

       왼쪽의 모든 공간을 차지하기 위해, item을 왼쪽에서 오른쪽으로 민다.

margin: 0 auto

       item을 양쪽에서 밀기 때문에, 수평 중앙에 위치한다.

margin-bottom: auto

       아래의 모든 공간을 차지하기 위해, item을 아랫쪽에서 윗쪽으로 민다.

margin-top: auto

       위의 모든 공간을 차지하기 위해, item을 윗쪽에서 아랫쪽으로 민다.

margin: auto 0

       item을 아래 위로 밀기 때문에, 수직 중앙에 위치한다.

Flex에서 margin : auto

- flex에서 margin: auto 속성을 사용하면 item을 간단히 수직정렬할 수 있다.

실습 3) 네비게이션

https://codepen.io/min00700/full/rQGREM/

https://section.cafe.naver.com/

구조

.logo

.gnb

.header



 <header class="header">
     <div class="logo">logo</div>
     <div class="search">search</div>
     <div class="gnb">gnb</div>
 </header>

html

.search

조건

- logo와 search는 좌측정렬을 하고, gnb만 우측정렬을 한다.

- logo와 search, gnb는 모두 고정 크기를 가지고 있다. (반응형이 아니다)

 

1단계. flex 레이아웃 만들기

.header{
    display: flex;
}

css

.logo,
.search,
.gnb{
    flex: none;
}

css

2단계. logo, search, gnb 고정크기로 만들기

3단계. gnb만 우측정렬로 만들기

.search{
    flex: 1;
}

2. flex: 1을 활용

1. margin-left: auto 활용

.gnb{
    margin-left: auto;
}

- search를 확장하여 gnb가 오른쪽으로 밀리도록 한다.

- gnb만 오른쪽으로 민다.

css

css

구조



 <div class="search">
     <input type="text" class="input">
     <button class="btn">검색</button>
 </div>

html

.btn

.input

.search

조건

- btn은 콘텐츠 크기만큼의 고정크기를 가진다.

- input은 btn을 제외한 search의

영역만큼 확장된다.

5단계. btn 고정크기로 만들기

.btn{
    flex: none;
}

css

6단계. input 확장하기

.input{
    flex: 1;
}

css

4단계. search flex로 만들기

.search{
    display: flex;
}

css

실습 4) 바닥에 붙는 푸터

https://codepen.io/min00700/full/EObwye/

https://news.naver.com/

개인 실습

.main


 <div class="main">
    <footer class="footer">footer</footer>
 </div>

html

.footer

조건

- footer는 100px의 고정 높이를 가진다.

- footer는 main의 콘텐츠 길이와 상관없이 가장 아래에 위치한다.

.main{
    display: flex;
    flex-direction: column;
}

css

2단계. 수직 정렬하기

1단계. flex 레이아웃 만들기

.main{
    display: flex;
}

css

.footer{
    flex: none;
    height: 100px;
    margin-top: auto;
}

css

4단계. footer를 아래로 밀기

3단계. footer를 고정크기로 만들기

.footer{
    flex: none;
    height: 100px;
}

css

- 주축을 기준으로 수평정렬 하는 방법

justify-content

Flex 기본속성

flex-start (기본값) 

        주축의 시작부분을 기준으로 정렬한다.

center

        주축의 중앙을 기준으로 정렬한다.

flex-end

        주축의 끝부분을 기준으로 정렬한다.

space-around

        모든 flex-item들은 주축을 기준으로 일정한 간격으로 정렬한다.

space-between

        첫번째와 마지막 flex item은 주축의 시작과 끝 부분에 정렬되고, 나머지는 일정한 간격으로 정렬한다.

http://www.csstutorial.org/flex-both.html

실습 5) 정렬이 다른 메뉴

https://tv.line.me

https://codepen.io/min00700/full/XyzeQG/

구조

.list

.tablist



 <ul class="tablist">
     <li class="list">list1</li>
     <li class="list">list2</li>
     <li class="list">list3</li>
 </ul>

html

.list

.list

조건

- 첫번째와 마지막 list는 좌우 양끝에 정렬되고, 이를 제외한 list는 중앙에 정렬된다.

1단계. flex 레이아웃 만들기

.tablist{
    display: flex;
}

css

css

2단계. 메뉴 정렬하기

.tablist{
    display: flex;
    justify-content: space-between;
}

- 주축을 기준으로 수직정렬 하는 방법

align-items

Flex 기본속성

stretch (기본값) 

        flex item의 높이를 늘려 flex container의 전체 높이를 채울 수 있도록 합니다.

flex-start 

        교차축의 시작부분을 기준으로 정렬합니다.

center 

        교차축의 중앙을 기준으로 정렬합니다.

flex-end 

        교차축의 끝부분을 기준으로 정렬합니다.

baseline 

        flex container의 baseline을 기준으로 정렬합니다.

실습 6) 수직 중앙정렬된 타이틀

https://section.blog.naver.com/

https://codepen.io/min00700/full/vQWdyB/

구조

.row


    <div class="row">
        <div class="title">타이틀 1,2,3줄</div>
        <input type="textarea" class="txtfield"/>
    </div>

html

.title

.txtfield

조건

- title은 100px의 고정너비를 가진다.

- txtfield는 title 영역을 뺀 row영역의

모든 너비를 가진다.

- title은 수직 중앙정렬이다.

1단계. flex 레이아웃 만들기

.row{
    display: flex;
    flex: none;
}

css

css

2단계. title 고정크기로 만들기

.title{
    flex: 0 0 100px;
}

3단계. input 확장하기

.txtfield{
    flex: 1;
}

css

css

4단계. 타이틀 수직 중앙 정렬하기

.row{
    display: flex;
    flex: none;
    align-items: center;
}

실습 7)  중앙정렬 아이콘

https://codepen.io/min00700/full/ZmaoMe/

https://tv.naver.com/v/4522983/list/67096​

구조

.box


<div class="wrap">
     <div class="box">
        <span class="icon"></span>
     </div>
</div>

html

.icon

조건

- box는 wrap의 전체크기를 가진다.

- icon은 box의 중앙에 정렬한다.

1단계. wrap의 전체크기만큼 .box 확장하기

.box{
    display: flex;
    flex: 1;
}

css

2단계. box flex 레이아웃 만들기

.box{
    display: flex;
    flex: 1;
}

css

3단계. icon 중앙정렬하기

.icon{
    margin: auto;
}

2. margin: auto를 활용

1. justify-content와 align-items를 활용

.box{
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}

css

css

- flex 기본값, 확장 되지는 않고 공간이 작아지면 축소 된다.

flex : initial ( 0 1 auto )

Flex 단축속성

실습 8) 유동너비 박스

https://search.shopping.naver.com/search/all.nhn?query=%EC%B9%98%EB%A7%88

https://m.land.naver.com/

https://codepen.io/min00700/full/Kryeav/

1. 공간이 충분 할 때는 컨텐츠 길이에 맞게 배치

2. 공간이 충분하지 않을 때는 컨텐츠 길이가 줄어듦

구조

.filter_box

.btn

.filter



 <div class="filter">
     <div class="filter_box">가나다라마바사아자차카</div>
     <div class="filter_box">가나다</div>
     <div class="filter_box">가나다라마바</div>
     <div class="filter_box">가나다라마바라마바</div>
     <button class="btn">버튼</button>
 </div>

html

조건

- filter_box는 최대 200px의 너비를 가진다.

- filter의 크기가 작아지면 filter_box의 크기도 filter에 맞추어 작아진다.

- btn은 고정된 크기를 가진다.

- btn은 우측 정렬이다.

1단계. flex 레이아웃 만들기

.filter{
    display: flex;
    align-items: center;
}

css

.filter .btn{
    flex: none;
    margin-left: auto;
}

css

2단계. 버튼 우측 정렬하기

4단계. 확장되지 않고 축소만 되는 filter_box 만들기 

.filter_box{
    flex: initial;
}

css

.filter_box{
    max-width: 200px;
}

css

3단계. 최대 크기 선언하기

.filter_box{
    /*
        flex: initial 생략가능!
    */
}

- 기본값은 0, order 속성 값이 낮을수록 주축의 시작점에 높을 수록 주축의 끝점에위치한다.

order :

Flex 기본속성

-1       0        1

조건

- 마크업 구조를 변경하지 않고, 첫 번째와 마지막 filter_box의 위치를 변경한다.

- btn의 위치는 변경하지 않는다. (우측 정렬 유지)

 

2

4

3

1

.btn

구조

2단계. btn에 order 속성값 선언하기

css

.filter .filter_box:first-of-type{
    order:1;
}

.filter .filter_box:last-of-type{
    order:-1;
}

css

1단계. 첫 번째와 마지막 요소 순서 바꾸기

.filter .btn{
    order:2;
}

실습 9) 말줄임 + 아이콘

https://news.naver.com/main/main.nhn?mode=LSD&mid=shm&sid1=100

https://codepen.io/min00700/full/wQPXxd/

1. 타이틀이 짧을 때

2. 타이틀이 넘칠 때

구조

.title

.tag

.title_box


 <div class="title_box">
     <div class="title">타이틀</div>
     <em class="tag">태그1</em>
     <em class="tag">태그2</em>
     <em class="tag">태그3</em>
 </div>

html

조건

- tag는 고정크기를 가진다.

- title 은 부모의 크기가 줄어들면 축소된다.


1단계. flex 레이아웃 만들기

.title_box{
    display: flex;
    align-items: center;
}

css

.tag{
    flex: none;
}

css

2단계. tag 고정크기로 만들기

.tag{
    flex: none;
}

css

2단계. tag 고정크기로 만들기

- item이 container의 크기를 벗어났을 때의 개행여부를 결정한다.

flex-wrap

Flex 기본속성

nowrap

      기본값인 속성값 nowrap은 container의 너비보다 item 너비의 합이 더 커져도 개행을 하지 않고

    한 줄로 배치 된다. 이렇게 되면 item은 container의 크기를 넘치게 된다.

wrap

     wrap은 item 너비의 합이 container 너비를 넘어가려고 할 때, 개행시켜 여러 줄로 배치되도록         한다. 이렇게 되면 item은 container의 크기를 넘치지 않는다.

 

- item이 여러 줄일때 주축을 기준으로 수직정렬 하는 방법

align-content

Flex 기본속성

stretch (기본값)

     flex item의 높이를 늘려 flex container의 전체 높이를 채운다.

flex-start 

     교차축의 시작부분을 기준으로 정렬한다.

center 

     교차축의 중앙을 기준으로 정렬한다.

flex-end 

     교차축의 끝부분을 기준으로 정렬한다.

space-around 

     모든 flex-item들은 교차축을 기준으로 일정한 간격으로 정렬한다.

space-between 

     첫번째와 마지막 flex item은 교차축의 시작과 끝 부분에 정렬되고, 나머지는 일정한 간격으로 정렬한다.

실습 10) 상하정렬 롤링리스트

https://tv.line.me/

https://codepen.io/min00700/full/oQoMMZ/

1

2

3

4

5

6

7

8

- Normal flow의 우선 순위는 좌우이고, 좌우의 흐름을 따를 수 없을 때

  상하의 흐름을 따른다.

기존 상하정렬 리스트

1

2

3

4

1

2

3

4

- depth가 깊어지게 되고, UI 변경시 마크업 구조 수정이 필요하다.

기존 상하정렬 리스트

구조

.container


 <ul class="container">
    <li class="item">
       <div class="thumb">thumb</div>    
       <div class="title">title</div>         
    </li>
 </ul>

html

.title

.thumb

.item

1

2

3

4

조건

- item은 상하 정렬이다.

- item들은 균등한 간격을 가지고 있다.

- item은 반응형이 아니다. (고정된 크기를 가진다.)

힌트

 

  

✔︎ flex-direction

✔︎ flex-wrap

✔︎ align-content

✔︎ justify-content

종합실습 1

1단계. flex 레이아웃 만들기

.container{
    display: flex;
    flex: none;
}

css

css

2단계. 고정크기를 가진 item 만들기

.item{
    flex: none;
}

.container{
    display: flex;
    flex-direction: column;
}

css

css

3단계. 수직 정렬하기

.container{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

4단계. 넘친 item 개행하기

css

.container{
    display: flex;
    flex-flow: column wrap;
}

.container{
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
}

css

css

5단계. 수직 균등 정렬하기

6단계. 수평 균등 정렬하기

.container{
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    align-content: space-around;
}

.item{
    display: flex;
    flex-flow: column;
}

css

css

7단계. item 수직 정렬하기

8단계. title 확장하기

.title{
    flex:1;
}

- 공간에 맞추어 확장되고 공간이 작아지면 줄어든다.

flex : auto ( 1 1 auto )

Flex 단축속성

flex-basis: auto와 0의 차이

Flexbox 기본속성

1

가나다라

0

flex-grow: 1일 때

가나다라마바사아

가나다라

가나다라마바사아

auto(기본값)

1

1

1

1

1

실습 11) 가로세로 비율을 유지하는 반응형 박스

https://codepen.io/min00700/full/aQVayy/

구조

.photo_container


 <ul class="photo_container">
    <li class="photo_item">
       <div class="thumb">
         <img src="" 
         width="100%" height="100%">
       </div>    
       <div class="title">title</div>         
    </li>
 </ul>

html

.title

.thumb

.photo_item

종합실습 2

1

2

3

4

조건

- item은 수평 정렬이다.

- 한 줄에 3개의 item이 균등한 정렬이 되어있다.

- item은 반응형이다.

- thumb에 height를 선언하지 않는다.

- 이미지가 없는 thumb도 동일한 크기를 가진다.

- title은 40px의 고정 높이를 가진다.

힌트

 

  

✔︎ flex-direction

✔︎ flex-wrap

✔︎ flex

✔︎ flex-basis

1단계. flex 레이아웃 만들기

.photo_container{
    display: flex;
}

css

css

2단계. 일정한 비율을 가진 item 만들기

.photo_item{
    flex-basis: 33.3%;
}

3단계. 넘친 item 개행하기

.photo_container{
    display: flex;
    flex-wrap: wrap;
}

css

.photo_item{
    display: flex;
    flex-dirction: column;
    flex-basis: 33.3%;
}

css

4단계. item 수직 정렬하기

.thumb{
    flex: auto;
}

css

5단계. thumb 확장시키기

.thumb{
    flex: none;
    flex-basis: 40px;
}

css

6단계. title 고정크기로 만들기

https://flexboxfroggy.com/#ko

http://flexbox.malven.co/

3. Flex를 사용하면 왜 좋을까?

구조가 간단하다.

반응형 레이아웃에 효과적이다.

유연한 레이아웃 표현이 가능하다.

작업 과정에서 실수비율이 줄어든다.

코드가 간단하고 직관적이다.

3-1. flex 레이아웃을 사용하면 왜 좋을까?

협업자들의 편의성을 높여준다.

초보자는 보다 쉽게,

3-1. flex 레이아웃을 사용하면 왜 좋을까?

전문가는 불가능했던 레이아웃을 구현할 수 있다.

1-2. Can I use Flexbox ?

지원범위 PC

IE10 이상

1-2. Can I use Flexbox?

지원범위 Moblie

1-2. Can I use Flexbox?

Android, IOS

거의 모든 버전에서 적용이 가능

감사합니다.

Q & A

lecture material_flexbox

By Min Young Lee

Made with Slides.com

lecture material_flexbox

  • 142

More from Min Young Lee