Flexbox 입문
이민영 (minyoung2@nts-corp.com)
주선미 (newhippy@nts-corp.com)
목차
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/2HVCQR
실습 자료
강의 자료
https://goo.gl/7oc2G2
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) 수직정렬 레이아웃 만들기
구조
.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를 사용하여 수직정렬을 한다.
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% 레이아웃
.content
<div class="content">
<div class="aside">aside</div>
<div class="main">main</div>
</div>
html
.aside
.main
조건
- content의 height: 100%를 선언한 것과
동일한 레이아웃으로 만든다.
- aside와 main의 너비는 1 대 2의 비율을 가진다.
구조
- 확장 되지도 축소 되지도 않는다. 공간에 영향을 받지 않고, 원래의 크기를 유지한다.
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) 네비게이션
구조
.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만 우측정렬을 한다.
구조
<div class="search">
<input type="text" class="input">
<button class="btn">검색</button>
</div>html
.btn
.input
.search
조건
- btn은 콘텐츠 크기만큼의 고정크기를 가진다.
- input은 btn을 제외한 search의
영역만큼 확장된다.
실습 4) 바닥에 붙는 푸터
개인 실습
.main
<div class="main">
<footer class="footer">footer</footer>
</div>
html
.footer
조건
- footer는 100px의 고정 높이를 가진다.
- footer는 main의 콘텐츠 길이와 상관없이 가장 아래에 위치한다.
- 주축을 기준으로 수평정렬 하는 방법
justify-content
Flex 기본속성
flex-start (기본값)
주축의 시작부분을 기준으로 정렬한다.
center
주축의 중앙을 기준으로 정렬한다.
flex-end
주축의 끝부분을 기준으로 정렬한다.
space-around
모든 flex-item들은 주축을 기준으로 일정한 간격으로 정렬한다.
space-between
첫번째와 마지막 flex item은 주축의 시작과 끝 부분에 정렬되고, 나머지는 일정한 간격으로 정렬한다.
실습 5) 정렬이 다른 메뉴
구조
.list
.tablist
<ul class="tablist">
<div class="list">list1</div>
<div class="list">list2</div>
<div class="list">list3</div>
</div>html
.list
.list
조건
- 첫번째와 마지막 list는 좌우 양끝에 정렬되고, 이를 제외한 list는 중앙에 정렬된다.
- 주축을 기준으로 수직정렬 하는 방법
align-items
Flex 기본속성
stretch (기본값)
flex item의 높이를 늘려 flex container의 전체 높이를 채울 수 있도록 합니다.
flex-start
교차축의 시작부분을 기준으로 정렬합니다.
center
교차축의 중앙을 기준으로 정렬합니다.
flex-end
교차축의 끝부분을 기준으로 정렬합니다.
baseline
flex container의 baseline을 기준으로 정렬합니다.
실습 6) 수직 중앙정렬된 타이틀
구조
.row
<div class="main">
<div class="row">
<div class="title">타이틀 1,2,3줄</div>
<input type="textarea" class="txtfield"/>
</div>
</div>html
.title
.txtfield
조건
- title은 100px의 고정너비를 가진다.
- txtfield는 title 영역을 뺀 row영역의
너비를 가진다.
- title은 수직 중앙정렬이다.
- 반응형이 아니다.
실습 7) 중앙정렬 아이콘
구조
.box
<div class="aside">
<div class="box">
<span class="icon"></span>
</div>
</div>html
.icon
조건
- box는 aside의 전체크기를 가진다.
- icon은 box의 중앙에 정렬한다.
- flex 기본값, 확장 되지는 않고 공간이 작아지면 축소 된다.
flex : initial ( 0 1 auto )
Flex 단축속성
실습 8) 유동너비 박스
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가
3개 이상있다.
- filter_box는 최대 200px의 너비를 가진다.
- btn은 고정된 크기를 가진다.
- filter의 크기가 작아지면 filter_box의 크기도 filter에 맞추어 작아진다.
- 기본값은 0, order 속성 값이 낮을수록 주축의 시작점에 높을 수록 주축의 끝점에위치한다.
order :
Flex 기본속성
-1 0 1
조건
- 마크업 구조를 변경하지 않고, 첫 번째와 마지막 filter_box의 위치를 변경한다.
- btn의 위치는 변경하지 않는다. (우측 정렬 유지)
2
4
3
1
.btn
구조
display: flex & inline-flex
Flex 기본속성
flex
block-level-element와 같이 한 행의 전체영역을 차지한다.
inline-flex
inline-level-element와 같이 한 행의 일부 영역만을 차지한다.
실습 9) 말줄임 + 아이콘
1. 타이틀이 짧을 때
2. 타이틀이 넘칠 때
구조
.title
.tag
.title_box
<div class="aside">
<div class="title_box">
<div class="title">타이틀</div>
<em class="tag">태그1</em>
<em class="tag">태그2</em>
<em class="tag">태그3</em>
</div>
<div class="box">...</div>
</div>html
- 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) 상하정렬 롤링리스트
구조
.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은 반응형이 아니다. (고정된 크기를 가진다.)
종합실습 1
- 공간에 맞추어 확장되고 공간이 작아지면 줄어든다.
flex : auto ( 1 1 auto )
Flex 단축속성
flex-basis: auto와 0의 차이
Flexbox 기본속성
1
가나다라
0
flex-grow: 1일 때
가나다라마바사아
가나다라
가나다라마바사아
auto(기본값)
1
1
1
1
1
실습 11) 가로세로 비율을 유지하는 반응형 박스
구조
.poster_container
<ul class="photo_container">
<li class="photo_item">
<div class="thumb">
<img src="https://goo.gl/hXkDkP"
width="100%" height="100%">
</div>
<div class="title">title</div>
</li>
</ul>
html
.title
.thumb
.item
종합실습 2
1
2
3
4
조건
- item은 좌우 정렬이다.
- item들은 균등한 간격을 가지고 있다. (한 줄에 3개)
- item은 반응형이다.
- thumb에 height를 선언하지 않는다.
- 이미지가 없는 thumb도 동일한 크기를 가진다.
3. Flex를 사용하면 왜 좋을까?
구조가 간단하다.
반응형 레이아웃에 효과적이다.
유연한 레이아웃 표현이 가능하다.
작업 과정에서 실수비율이 줄어든다.
코드가 간단하고 직관적이다.
3-1. flex 레이아웃을 사용하면 왜 좋을까?
협업자들의 편의성을 높여준다.
초보자는 보다 쉽게,
3-1. flex 레이아웃을 사용하면 왜 좋을까?
전문가는 불가능했던 레이아웃을 구현할 수 있다.
1-2. Can I use Flexbox ?
지원범위 PC
IE10 이상
1-2. Can I use Flexbox?
PC 작업에 적용하기에는 아직 이른 감이 있다.
지원범위 Moblie
1-2. Can I use Flexbox?
Android, IOS
거의 모든 버전에서 적용이 가능
모바일 지원율은 매우 좋음, 지금 당장 적용하자!
감사합니다.
Q & A
flexbox
By Min Young Lee
flexbox
2018 NTS 오프라인 강의
