2. 기능으로 나누기
활용
- 레이아웃
- flex에서 margin:auto
1. flex 이해하기
- flex 소개
(flex란? + flex의 특징 + 지원범위 등)
- display 2
- flex-direction 4
2. 확장 & 축소하기
- flex-grow
- flex-shrink
- flex-basis
- flex 단축속성
- order : item 추가 속성
3. 정렬하기
- flex-wrap 2
- justify-content 5
- align-item 5
- align-content 6
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>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
display: flex & inline-flex
Flex 기본속성
flex
block-level-element와 같이 한 행의 전체영역을 차지한다.
inline-flex
inline-level-element와 같이 한 행의 일부 영역만을 차지한다.
flex container의 주축과 교차축은 정렬 및 순서에 중요한 역할을 합니다.
Flexbox 주요특징 2
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
2. 확장 & 축소하기
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%
가나다라
flex-basis: auto와 0의 차이
Flexbox 기본속성
1
가나다라
0
flex-grow: 1일 때
가나다라마바사아
가나다라
가나다라마바사아
auto(기본값)
1
1
1
1
1
3. 정렬하기
- 주축을 기준으로 수평정렬 하는 방법
justify-content
Flex 기본속성
flex-start (기본값)
주축의 시작부분을 기준으로 정렬한다.
center
주축의 중앙을 기준으로 정렬한다.
flex-end
주축의 끝부분을 기준으로 정렬한다.
space-around
모든 flex-item들은 주축을 기준으로 일정한 간격으로 정렬한다.
space-between
첫번째와 마지막 flex item은 주축의 시작과 끝 부분에 정렬되고, 나머지는 일정한 간격으로 정렬한다.
- 주축을 기준으로 수직정렬 하는 방법
align-items
Flex 기본속성
stretch (기본값)
flex item의 높이를 늘려 flex container의 전체 높이를 채울 수 있도록 합니다.
flex-start
교차축의 시작부분을 기준으로 정렬합니다.
center
교차축의 중앙을 기준으로 정렬합니다.
flex-end
교차축의 끝부분을 기준으로 정렬합니다.
baseline
flex container의 baseline을 기준으로 정렬합니다.
- item이 여러 줄일때 주축을 기준으로 수직정렬 하는 방법
align-content
Flex 기본속성
stretch (기본값)
flex item의 높이를 늘려 flex container의 전체 높이를 채운다.
flex-start
교차축의 시작부분을 기준으로 정렬한다.
center
교차축의 중앙을 기준으로 정렬한다.
flex-end
교차축의 끝부분을 기준으로 정렬한다.
space-around
모든 flex-item들은 교차축을 기준으로 일정한 간격으로 정렬한다.
space-between
첫번째와 마지막 flex item은 교차축의 시작과 끝 부분에 정렬되고, 나머지는 일정한 간격으로 정렬한다.
- item이 container의 크기를 벗어났을 때의 개행여부를 결정한다.
flex-wrap
Flex 기본속성
nowrap
기본값인 속성값 nowrap은 container의 너비보다 item 너비의 합이 더 커져도 개행을 하지 않고
한 줄로 배치 된다. 이렇게 되면 item은 container의 크기를 넘치게 된다.
wrap
wrap은 item 너비의 합이 container 너비를 넘어가려고 할 때, 개행시켜 여러 줄로 배치되도록 한다. 이렇게 되면 item은 container의 크기를 넘치지 않는다.
4. 활용
.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 단축속성
- 확장 되지도 축소 되지도 않는다. 공간에 영향을 받지 않고, 원래의 크기를 유지한다.
flex : none ( 0 0 auto )
Flex 단축속성
- flex 기본값, 확장 되지는 않고 공간이 작아지면 축소 된다.
flex : initial ( 0 1 auto )
Flex 단축속성
- 공간에 맞추어 확장되고 공간이 작아지면 줄어든다.
flex : auto ( 1 1 auto )
Flex 단축속성
- 기본값은 0, order 속성 값이 낮을수록 주축의 시작점에 높을 수록 주축의 끝점에위치한다.
order :
Flex 기본속성
-1 0 1
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을 간단히 수직정렬할 수 있다.
실습) 네비게이션
실습) 바닥에 붙는 푸터
flex강의샘플
By Min Young Lee
