peterlee.kr

ID

Date

Target

Title

Contents

좋은설명
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.

Edit

PersonModel