flex

목차

1. flex 이해하기

- flex 소개

(flex란? + flex의 특징 + 지원범위 등)

 

2.flex 사용하기

- display

- flex-direction

- flex-wrap

 

3. 확장 & 축소하기

- flex-grow

- flex-shrink

- flex-basis

- flex 단축속성

 

4. 정렬하기

- justify-content

- align-item

- align-content

 

5.순서바꾸기

- order

1. Flex 이해하기

1-1. flex 소개

flex 등장배경

 

table float

 

flex 변천사

 

display:box

box-direction

 

display: flexbox

display:inline-flexbox

 

display: flex

지원범위

 

https://caniuse.com/#feat=flexbox

flex는 flexible의 준말로 유연성

css3에서 처음 소개 되었다.

1차원 레이아웃 모델 로 설계되었습니다.

 

플렉스는 container와 item으로 나누어져있는데~~~~

 

item을 어떤 방향으로도 배치를 할수있고,

자식의 크기도 플렉시블(유연하게) 빈공간을 채우거나, 컨테이너를 넘어가지 않도록 줄어들게 할 수도 있다.

또한 자식간의 수평 및 수직 정렬 또한 쉽게 할 수 있음.

뷰 포트 및 엘리먼트의

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

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

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

Flexbox 란?

예제 사이트 경로

float와 inline-block

3. flex 사용하기

Flexbox 사용하기

.container{
    display: flex;
    /* display: inline-flex; */
}
<div class="container">
	<div class="item">item 1</div>
	<div class="item">item 2</div>
	<div class="item">item 3</div>	
</div>

html

css

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

Flexbox 주요특징 1

display 

Flex 기본속성

flex

inline-flex

block-level-element와 같이 한 행의 전체영역을 차지한다.

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

예제.

flex와 inline-flex 비교

여러 item 다양하게 정렬하기

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

flex-wrap

Flex 기본속성

nowrap

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

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

wrap

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

 

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

Flexbox 주요특징 3

3. 확장 & 축소하기

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

width와 flex-basis 차이

.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 기본값, 확장 되지는 않고 공간이 작아지면 축소 된다.

flex : initial ( 0 1 auto )

Flex 단축속성

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

flex : none ( 0 0 auto )

Flex 단축속성

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

flex : auto ( 1 1 auto )

Flex 단축속성

4. 정렬하기

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

justify-content

flex-start (기본값) 

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

center

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

flex-end

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

space-around

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

space-between

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

Flexbox 기본속성

예제 메뉴 정렬하기

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

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은 교차축의 시작과 끝 부분에 정렬되고, 나머지는 일정한 간격으로 정렬한다.

예제 2줄 라인 

5. 순서 변경하기

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

order :

Flex 기본속성

-1       0        1

2줄 멀티일때 어케 되는지도 궁금..

 

2

4

3

1

구조

2-5. [최종 실습]

Flexbox를 이용해

레이아웃 만들어보기

실습 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를 사용하면 왜 좋을까?

1-2. Can I use Flexbox ?

감사합니다.

Q & A

Made with Slides.com