Flex box
좋은설명
https://poiemaweb.com/css3-flexbox
전체 레이아웃은 flexbox 적용 중
flex-container와
flex-item속성
bootstrap과 flexbox 의 관계
bootstrap row와 flexbox 의 관계는
flexbox는 언제 사용하는가?
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#prefixing-flexbox
flex box Container :
-flex-direction(row, row-reverse, column, column-reverse)
-flex-wrap(wrap, nowrap)
-flex-flow는 flex-direction 과 flex-wrap을 둘 다 지정할 수 있다.
ex) flex-flow : flex-direction속성값, flex-wrap속성값
- justify-content ( flex-start, flex-end, center, space-between, space-around, space-evenly)
- align-items (flex-start, flex-end, center, stretch, baseline)
- align-content (flex-start, flex-end, center, stretch, space-between, space-around)
- gap, row-cap, column-gap
flexbox items
-order
-flex-grow
-flex-shrink
-flex-basis
-align-self ( auto, flex-start, flex-end, center, baseline, stretch)
ex)
flex: none | flex-grow, flex-shrink, flex-basis
This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, it’s like 1 0.