09_CSS_FLEX

이번에는 CSS속성중 FLEX에 대해 알아보겠다.

CSS FLEX(Flexible Box)

Flex는 요소의 크기가 불분명 하거나, 동적인 경우에도 각 요소를 정렬할 수 있는 효율적인 방법을 제시.
Container와 item으로 구성되어 사용된다.
Container : display,flex-flow,justify-content
item : order,flex,align-self 등의 속성을 사용할 수 있다.

일일히 display설정을 바꿔주고 ,font-size를 설정

clearfix사용

위와같은 번잡함을 사용하지 않고, flex를 사용하면 보다 쉽게 요소들을 사용할 수 있다.

flex

Flex Container
display : Flex Container를 정의
flex-flow : Flex-direction와 flex-wrap의 단축 속성
flex-direction Flex items의 주 축을 설정
flex-wrap : Flex Items의 여러 줄 묶음 설정
justify-content 주축의 정렬 방법을 설정
align-content 교차 축의 정렬 방법 설정
align-items 교차축에서 items의 정렬 방법 설정

display
flex : blcok특성의 flex Container를 정의
>>블럭요소처럼 Container가 블럭 요소처럼 쌓인다
inline-flex : inline-flex Container를 정의
>>인라인요소처럼 Container가 쌓이게 된다.

flex-flow
Flex-direction과 Flex-wrap의 단축 속성이다.

Flex-direction
row : items를 수평(좌에서 우)으로 표시
row-reverse : row의 반대방향
column : items를 수직축(위에서아래)로 표시
column-reverse : column의 반대 방향

>> 수평일경우 수평축이 주축이고, 수직으로정렬시 수직축이 주축이 된다.

시작점(flex-start)와 끝점(flex-end)
row와 같은경우 flex-start는 왼쪽, flex-end는 오른쪽이 되게 된다.

>>교차축의 시작과 끝은 항상 (좌>우)이거나 (상>하)이다.


flex-wrap
items의 여러 줄 묶음을 설정한다.
nowrap : 모든 items를 여러줄로 묶지 않음
wrap : items 를 여러 줄로 묶음
wrap : items를 wrap의 역 방향으로 여러줄로 묶음

flex-wrap

위처럼 2줄로 나오게 된다.

justify-content
주 축의 정렬 방법을 설정
flex-start : 시작점으로 정렬
flex-end : 끝점으로 정렬
center : 중앙으로 정렬
space-between : 첫,마지막아이템은 시작,끝점에 붙이고 나머지는 동일간격
space-around : 모든 아이템당 여백이 좌우가 같게 정렬

justify-content

align-content
교차 축의 정렬 방법을 설정
>>flex-wrap속성을 통해 items가 2줄 이상이고, 여백이 있는 경우에만 사용가능하다.
stretch : Container의 교차축을 채우기 위해 items을 늘림
flex-start : 시작점으로 정렬
flex-end : 끝점으로 정렬
center : 중앙으로 정렬
space-between : 첫,마지막아이템은 시작,끝점에 붙이고 나머지는 동일간격
space-around : 모든 아이템당 여백이 좌우가 같게 정렬

align-content

align-items
교차축에서 items의 정렬 방법을 설정
itmes가 한 줄일 경우 많이 사용한다.
>>여러중일경우 align-content속성이 우선되게 된다.
stretch : Container의 교차축을 채우기 위해 items을 늘림
flex-start : 시작점으로 정렬
flex-end : 끝점으로 정렬
center : 중앙으로 정렬
baseline : items를 문자 기준선에 정렬

align-items

위 성질을 이용하여 쓰기좋은 팁이하나있다.

위처럼 container안에 또다른 flex를 설정하여서, 그요소(text)를 수직,수평정렬하는 방법이다.


Flex items
order : Flex items의 순서 결정
flex : flex-grow,flex-shrink,flex-basis의 단축 속성
flex-grow :itmes의 증가 너비 비율을 설정
flex-shrink : itmes의 감소 너비 비율을 설정
flex-basis : items의 (공간 배분 전) 기본 너비 설정
align-self : 교차 축에서 items의 정렬 방법을 설정


order
items의 순서를 설정한다.
숫자를 지정하고, 숫자가 클수록 숫자가 밀린다
>> 음수가 허용된다!!
>>HTML구조와 상관없이 순서를 변경할 수 있기때문에 유용하다.

order

flex-grow
숫자가 크면 더많은 너비를 가지게 된다.
기본값은 0

item 3개가 각각 flex-grow를 1,2,1로 나누어 가진다면, 1:2:1로 가로넓이를 가져가게 된다.
>>엄밀하진 않음!

flex-grow

flex-shrink
itme이 감소하는 너비의 비율을 설정

>> 브라우저의 크기가 줄어들때, 줄어드는 비율이 달라진다
>> item2개가 각각 1,2의 값을 가진다면, 2의 값을 가진 itme이 1의 값을 지닌 item보다 2배 더 감소하게 된다.


flex-basis
item의 공간배분전의 기본 너비를 설정
auto >> width,height등의 속성으로 item의 너비를 설정한다.
auto가아닌 단위인 경우, basis로 설정하게 된다.
basis를 0으로 설정해야, item안의 요소값에 상관없이 grow에만 따라서 너비가 정해지게 된다.
만약 100px로 설정하면, 요소들의 모든 기본요소값이 100px로설정된다!

basis : auto

basis : 100px

flex
item의 너비를 설정하는 단축 속성

flex : grow shrink basis
각각 기본값이 0/1/auto지만, 단축속성에서 쓰지않으면 basis의 기본값은 0으로 적용이 된다!


align-self
교차축에서 개별 item의 정렬 방법을 설정
auto : Container의 align-items속성을 상속받음
stretch : Container의 교차축을 채우기 위해 items을 늘림
flex-start : 시작점으로 정렬
flex-end : 끝점으로 정렬
center : 중앙으로 정렬
baseline : items를 문자 기준선에 정렬

align-self