- 혁신적인 기능
- flexbox : 박스를 유연하게 늘리거나 줄여 레이아웃을 잡을 수 있다.
부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법
display:flex-> 요소의 정렬, 요소가 차지하는 공간을 설정할 수 있다.
부모 - 자식 관계
flex container 안에 flex items 존재한다.
flexbox 대원칙
1. 항상 부모 요소에게 말을 건다. 자식 요소에게 말 걸지 않는다.
-> 부모 요소에게 말을 걸어 자식 요소를 컨트롤한다. =부모 박스 요소에 적용해. 자식 박스의 방향과 크기를 결정한다.2. 축이 존재하며 유동적이다.
-> 기본 - 가로:main axis / 세로:cross axis -> 경우에 따라 축이 변할 수 있다. = 유동적이다. = 가로가 cross axis 세로가 main axis로 변할 수 있다. => flex-direction 설정 시 변한다.
justify-content => main axis와 움직인다.
align-items => cross axis와 움직인다. / ex:align-items:flex-end
flex-direction:row (default) / flex-direction:column
속성 사용 시 유의할 점
- 속성을 지정해주는 위치
=> 부모 요소에 적용해야 하는 속성, 자식 요소에 적용해야 하는 속성이 따로 있다. 때문에 적정한 위치에 속성을 지정하지 않으면 원하는대로 정렬되지 않는다.
부모 요소에 적용해야 하는 flexbox 속성들 (정렬)
- flex-direction
=> 정렬 축 정하기
=> 자식 요소들을 정렬할 정렬 축을 정한다. ( default=가로 정렬 )
row(가로정렬,default),column(세로정렬),row-reverse(역가로정렬),column-reverse(역세로정렬)- flex-wrap
=> 줄바꿈 설정하기
=> 하위 요소들의 크기가 상위 요소의 크기를 넘을 경우 자동 줄바꿈 할 것인지 정한다.
default = 줄바꿈 X
nowwrap(default),wrap(줄바꿈),wrap-reverse(역방향줄바꿈)- justify-content
=> 축 수평 방향 정렬
=> 자식 요소들을 축의 수평방향으로 어떻게 정렬할 것인지 정한다.
default = row
- row(수평방향)인 경우
flex-start(좌측정렬), flex-end(우측정렬), center(가운데정렬), space-between(양끝정렬), space-around- column(수직방향)인 경우
flex-start(상위정렬), flex-end(하위정렬), center, space-between, space-around- align-items
=> 축 수직 방향 정렬
stretch, flex-start, flex-end, center, baseline
자식 요소에 적용해야 하는 flexbox 속성들 ( 공간 크기 )
flex: <grow(팽창지수)> <shrink(수축지수)> <basis(기본크기)>grow(팽창지수) : 요소의 크기가 늘어날 때 얼마나 늘어날 것인지. ( default=0 )
=> 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것
= 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지한다.
ex) box1,2,3의 flex-grow가 3,2,1인 경우
box1의 공간 : 3/6, box2의 공간 : 2/6, box3의 공간:1/6
shrink(수축지수) : 요소의 크기가 줄어들 때 얼마나 줄어들 것인지. (default=1)
설정한 비율만큼 박스 크기 작아진다. -> flex-grow와 따로 쓸 것을 추천, 비율로 레이아웃 지정할 경우 flex-grow속성 또는 flex: 1 auto 와 같이 grow 속성에 변화 주는 방식을 권장한다.
왜냐하면, flex-shrink 속성은 width나 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문이다.
flex-grow 속성으로 비율 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방하다.
basis(기본크기) : 팽창,수축과 관계 없이 요소의 기본 크기는 얼마인지. flex-grow 속성값이 0인 경우에만 flex-basis 속성의 값이 유지된다.
- width와 flex-basis를 동시에 적용하는 경우,flex-basis 우선
- 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않는다.
- (flex-basis 사용 안할 경우) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있다.
자식 요소 default
flex: 0 1 auto;& 왼쪽에서 오른쪽으로 컨텐츠의 크기만큼 배치.
작성방법
flex: grow shrink basis => flex: 0 1 auto (default)
flex-grow:1일 때, flex-basis:0 과 flex-basis:auto의 차이는?
flex-basis:auto 일 경우, 컨텐츠 사이즈에 맞춰서 나타난다.
flex-basis:0 일 경우, absolute flex item이 되어 상위 flex container를 기준으로 크기가 결정된다.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
order속성!
