Web - Front end 8. Flex

 Web - Front end 8. Flex

1. Flex 

레이아웃 배치 전용 기능으로 고안되었다.

부모 요소를 Flex Container 이라고 하고 자식 요소를 Flex item 이라고 한다.

컨테이너는 Flex의 영향을 받는 전체 공간이고 설정된 속성에 따라 각각의 아이템들이 배치된다.

Flex의 속성들은 컨테이너에 적용되는 속성과 아이템에 적용되는 속성으로 나뉜다. 

* flex를 적용할 기본 코드

<head>

<style>

.item{

border: 1px solid black

}

        .container{

border: 1px solid black;

}  

</style>

</head>

<body>

<div class="container">

<div class="item" style="font-size: 1.5em;">A</div>

<div class="item">B</div>

<div class="item" style="font-size: 2em;">C</div>

</div>

</body>

2.  컨테이너에 적용되는 속성

- display : flex;

아이템들이 가로방향으로 배치되고 내용물의 width만큼, 컨테이너의 heigt만큼 공간을 차지한다. 

아이템들이 배치된 방향을 메인축(main axis)이라고 하고 그 반대축을 교차축(cross axis)라고 한다. 설정을 통해 바꿀 수 있다.

inline-flex라고 하면 컨테이너가 inline-block 처럼 내용물의 width만큼만 공간을 차지한다. 

.container{

display: flex;

}

.container{

display: inline-flex;

}

- flex-direction

아이템들이 배치되는 축의 방향을 설정하는 속성이다.

row : 가로 배치

row-reverce : 역순으로 가로 배치

column : 세로 배치

column-reverse : 역순으로 세로 배치

- flex-wrap

컨테이너가 더이상 아이템을 한 줄에 담을 여유가 없을 때 아이템 줄바꿈을 어떻게 할 지 설정하는 속성

nowrap(기본값) : 줄바꿈을 하지 않고 넘치면 그냥 빠져나가거나 크기가 줄어든다. 

wrap : 줄바꿈을 하며 밑으로 내려간다.

wrap-reverce : 줄바꿈을 하되 아이템을 역순으로 배치한다. 

- flex-flow

flex-direction과 flex-wrap을 한번에 지정해 주는 단축속성이다. 

flex-direction flex-wrap 순으로 한 칸 떼고 써주면 된다.

.container{

display: flex;

flex-flow: row wrap;

}

* 정렬

justify : 메인축 방향으로의 정렬

align : 교차축 방향으로의 정렬

- justify-content

메인축 방향으로 아이템들을 정렬하는 속성

flex-start : 아이템들을 시작점으로 정렬

flex-end : 아이템들을 끝점으로 정렬

center : 아이템들을 가운데로 정렬

space-between : 아이템들의 사이에 균일한 간격을 만들어줌

space-around : 아이템들의 둘레에 균일한 간격을 만들어줌

space-evenly : 아이템들 사이와 양 끝에 균일한 간격을 만들어줌

(IE와 엣지에서는 지원하지 않음)

- align-items

교차축 방향으로 아이템들을 정렬하는 속성

stretch(기본값) : 아이템들이 교차축 방향으로 쭉 늘어남

flex-start : 아이템들을 시작점으로 정렬

flex-end : 아이템들을 끝점으로 정렬

center : 아이템들을 가운데로 정렬

baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬

align-content

flex-warp : warp이 설정된 상태에서 아이템들이 2줄 이상이 되었을 때 교차축 방향 정렬을 설정하는 속성

stretch : 아이템들을 교차쭉 방향으로 늘어남

flex-start : 아이템들을 시작점으로 정렬

flex-end : 아이템들을 끝점으로 정렬

center : 아이템들을 가운데 정렬

space-between : 아이템들 사이에 균일한 간격을 만들어줌

space-around : 아이템 둘레에 균일한 간격을 만들어줌

space-evenly : 아이템들 사이와 양 끝에 균일한 간격을 만들어줌

(IE와 엣지에서는 지원하지 않음)

3. 아이템에 적용하는 속성

- flex-basis

아이템의 기본 크기 설정

flex-direction이 row일때는 너비, column일때는 높이 설정

width, height에 사용하는 각종 단위가 사용될 수 있다. 차이는 콘텐츠가 지정한 크기보다 큰 경우 width나 height은 콘텐츠가 삐져나오면서 크기가 줄어들지만 flex-basis는 콘텐츠크기만큼 유지된다. 둘 다 설정하면 width나 height의 값이 우선으로 적용된다.

.item{

border: 1px solid black;

flex-basis: 100px;

}

.item{

border: 1px solid black;

width: 100px;

}

- flex-grow

아이템이 flex-basis 속성보다 커질 수 있는 지 설정

0(기본값) 이면 아이템이 늘어나지 않고 1 이상이면 아이템이 늘어가서 빈공간을 매운다.

숫자를 다르게 하면 아이템의 flex-basis를 제외한 여백부분의 비율을 설정할 수 있다. flex-basis가 0이면 여백이 아닌 전체 크기를 기준으로 비율을 설정할 수 있다.

.item{

border: 1px solid black;

flex-basis: 50px;

}

.item:nth-child(1){flex-grow: 2;}

.item:nth-child(2){flex-grow: 1;}

.item:nth-child(3){flex-grow: 3;}

- flex-shrink

flex-grow와 쌍을 이루는 속성으로 아이템이 flex-basis 속성보다 작아질 수 있는지 설정

0이면 줄어들지 않고 1 이상이면 줄어들게 된다. (기본값 1)

마찬가지로 값의 크기를 달리하면 줄어드는 비율을 설정할 수 있다. 

.item{

border: 1px solid black;

flex-basis: 300px;

}

.item:nth-child(1){flex-shrink: 1;}

.item:nth-child(2){flex-shrink: 1;}

.item:nth-child(3){flex-shrink: 3;}

- flex

flex-grow, flex-shrink, flex-basis 순서로 값을 지정할 수 있는 단축속성

생략되면 기본값으로 설정된다. 

- align-self

해당 아이템의 교차축 방향 정렬 설정

기본값은 auto로 align-items의 값을 상속받는다.

align-self는 align-items보다 우선권이 있다. 

auto, stretch, flex-start, flex-end, center, baseline

.item:nth-child(2){align-self: center;}

.item:nth-child(3){align-self: flex-end;}