flex 기초와

flexible 레이아웃 만들기

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

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

목차

1. Flex 알아보기

 

2. Flex 사용하기

     - flex 사용 방법

     - 확장 & 축소

     - 정렬하기

     - 순서 바꾸기

 

3. Flex로 레이아웃 만들기

0. 들어가기 전에

 

.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>

속성, 속성값 등

css

HTML 구조

.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

ID와 CLASS

.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

CSS 선언하기 속성,속성값

.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

inline과 block

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

1. Flex 알아보기

float 이미지 출처: https://css-tricks.com/almanac/properties/f/float/

table

float

Flex 등장배경

Flex 변천사

  • CSS3 속성
  • 2009년 7월

 

 

  • 2012년 3월

 

 

  • 2012년 6월
.container{
   display: box | inline-box;
   box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
   box-pack : start | end | center | justify;
}
.container{
   display: flexbox | inline-flexbox;
   flex-direction: row | row-reverse | column | column-reverse;
   flex-pack: start | end | center | justify | distribute;
}
.container{
   display: flex;
   flex-direction: row | row-reverse | column | column-reverse;
   justify-content: flex-start | flex-end | center | 
     		    space-between | space-around;  
}

Flex 변천사

  • CSS3 속성
  • 2009년 7월

 

 

  • 2012년 3월

 

 

  • 2012년 6월
.container{
   display: box;
   box-orient: vertical;
   box-pack : justify;
}
.container{
   display: flexbox;
   flex-direction: column;
   flex-pack: justify;
}
.container{
   display: flex;
   flex-direction: column;
   justify-content: space-between;  
}

PC

IE10 이상

Flex 지원범위

Moblie

Android, IOS

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

 이미지 출처: https://caniuse.com/#feat=flexbox

뷰 포트 및 엘리먼트의

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

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

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

Flex 정의

효율적인 Flex 레이아웃 예제

1. 크기가 불명확 하고,

    브라우저 크기에 따라 동적으로 크기가 변화함

2. 브라우저 크기에 따라

메뉴 사이의 간격이 동적으로 변화하며 균등하게 분배 됨

<table>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
</table>
<table>
    <tr>
        <td>a</td>
    </tr>
    <tr>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
    </tr>
</table>
<div class="parent">
    <div class="child">a</div>
    <div class="child">b</div>
    <div class="child">c</div>
</div>
.child{
    float: left; 
}
.parent:after{
  	display: block;
    clear: both;  
    content:'';
}
.child{
    float: right; 
}
.parent:after{
  	display: block;
    clear: both;  
    content:'';
}
<div class="parent">
    <div class="child">a</div>
    <div class="child">b</div>
    <div class="child">c</div>
</div>
.parent{
    display: flex;
}
.parent{
    display: flex;
    flex-direction: column;
}

2. Flexbox 사용하기

https:

강의 자료

2-1. Flex 사용방법

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

Flexbox 주요특징 1

display 

flex

inline-flex

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

inline-level-element와 같이 한 행의 일부 영역만을 차지한다.

예제 : https://codepen.io/min00700/pen/xxKNNNq?editors=1100

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

Flexbox 주요특징 2

flex-direction

row(기본값)

row-reverse

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

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

1         2         3

3         2         1

flex-direction

column-reverse

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

column

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

3

 

2

 

1

1

 

2

 

3

예제 : https://codepen.io/min00700/full/JjPgWwz

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

Flexbox 주요특징 3

.header

.navigation

.content

.wrap

조건

- flex 레이아웃으로 만든다.

- flex-direction을 사용하여 .aside와 .main을

수평 정렬을 한다.

 

.aside

.main

실습 예제

2-2. 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 기본속성

예제 : https://codepen.io/min00700/full/rNBEvdr

0

flex-shrink:

0

1 (기본 값)

1

1

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

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

Flexbox 기본속성

예제 : https://codepen.io/min00700/full/rNBEvdr

flex-basis

Flexbox 기본속성

가나다라

200px

가나다라

auto(기본값), 0

50%

가나다라

예제 : https://codepen.io/min00700/full/PoYrarB

flex-basis: auto와 0의 차이

1

가나다라

0

flex-grow: 1일 때

가나다라마바사아

가나다라

가나다라마바사아

auto(기본값)

1

1

1

1

1

예제 : https://codepen.io/min00700/full/PoYrarB

조건

 

- header와 navigation은 100px의 고정높이를

가진다.

- content는 header와 navigation을 제외한 wrap 영역 모두를 가진다.

- aside와 main은 content 가로 영역을

1대1비율로 나누어 가진다.

- aside와 main의 너비는 브라우저에 따라

동적으로 변한다.

.header

.navigation

.content

.wrap

.aside

.main

실습 예제

.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 단축속성

예제 : https://codepen.io/min00700/full/jONgBja

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

flex: 2 1 0

flex : 2

flex-grow: 2

flex-shrink: 1

flex-basis: 0

flex: 2

=

=

Flex 단축속성

예제 : https://codepen.io/min00700/full/jONgBja

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

flex : initial ( 0 1 auto )

Flex 단축속성

예제 : https://codepen.io/min00700/full/jONgBja

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

flex : none ( 0 0 auto )

Flex 단축속성

예제 : https://codepen.io/min00700/full/jONgBja

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

flex : auto ( 1 1 auto )

Flex 단축속성

예제 : https://codepen.io/min00700/full/jONgBja

조건

 

- header,navigation,content를 단축속성으로

변환한다.

- aside와 main은 content 가로 영역을

1대2비율로 나누어 가진다.

 

.header

.navigation

.content

.wrap

.aside

.main

실습 예제

2-3. Flex로 정렬하기

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

justify-content

flex-start (기본값) 

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

center

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

flex-end

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

space-around

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

space-between

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

예제 : https://codepen.io/min00700/full/JjPQPYd

.list

.navigation

.list

.list

조건

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

실습 예제

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

align-items

stretch (기본값) 

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

flex-start 

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

center 

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

flex-end 

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

baseline 

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

예제 : https://codepen.io/min00700/full/JjPQPYd

- 요소마다 서로 다른 align 속성값을 설정하는 방법

align-self

auto (기본값) 

        flex container의 align-items의 속성값을 따릅니다.

stretch

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

flex-start 

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

center 

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

flex-end 

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

baseline 

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

예제 : https://codepen.io/min00700/full/JjPQPYd

실습 예제

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

.box

.icon

조건

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

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

실습 예제

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

flex-wrap

nowrap

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

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

wrap

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

wrap-reverse

      개행시 item의 순서가 반대로 배치된다.

 

예제 : https://codepen.io/min00700/full/JjPQPYd

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

align-content

stretch (기본값)

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

flex-start 

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

center 

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

flex-end 

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

space-around 

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

space-between 

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

예제 : https://codepen.io/min00700/full/JjPQPYd

실습 예제

.container

.title

.thumb

.item

조건

- item은 수직 정렬이다.

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

 

2-4. Flex로 순서 변경하기

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

order :

-1       0        1

예제 : https://codepen.io/min00700/full/JjPQPYd

실습 예제

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

3. Flex로 레이아웃 만들기

4. Flex 퀴즈

https://flexboxfroggy.com/

[초급]

flex로 레이아웃 만들기 2

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

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

목차

1. Flex 속성 복습

 

2. Flex로 레이아웃 만들기

 

 

1. Flex 속성 복습

2. Flex로 레이아웃 만들기

배너 레이아웃

https://codepen.io/newhippy25/pen/bGbPxGE

 

 

벽돌 레이아웃

https://codepen.io/newhippy25/pen/MWgMBQe

 

 

https://codepen.io/newhippy25/pen/jONoRWw

카드형 레이아웃

https://codepen.io/newhippy25/pen/QWLRPyv

flex와 margin:auto

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을 간단히 수직정렬할 수 있다.

예제) 바닥에 붙는 푸터

개인 실습

.main

.footer

조건

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

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

실습 7)  중앙정렬 아이콘

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도 동일한 크기를 가진다.

감사합니다.

Q & A

Made with Slides.com