#Container Properties
| Property | Values | Description | |
|---|---|---|---|
display | flexinline-flex | Enable flex container | |
flex-direction | rowrow-reversecolumncolumn-reverse | Set main axis direction | |
flex-wrap | nowrapwrapwrap-reverse | Set wrapping behavior | |
flex-flow | row nowrapcolumn wrap... | Shorthand for direction + wrap | |
justify-content | flex-startflex-endcenterspace-betweenspace-aroundspace-evenly | Main axis alignment | |
align-items | flex-startflex-endcenterstretchbaseline | Cross axis alignment | |
align-content | flex-startflex-endcenterstretchspace-betweenspace-around | Multi-line cross axis alignment | |
gap | 10px1rem10px 20px | Gap between items |
#Item Properties
| Property | Values | Description | |
|---|---|---|---|
order | 01-1... | Item order | |
flex-grow | 012... | Grow ratio | |
flex-shrink | 01... | Shrink ratio | |
flex-basis | auto0100px50% | Initial size | |
flex | 10 1 auto1 1 0... | Shorthand for grow shrink basis | |
align-self | autoflex-startflex-endcenterstretchbaseline | Individual cross axis alignment |
#Common Patterns
| Property | Values | Description | |
|---|---|---|---|
Center align | justify-content: centeralign-items: center | Perfect centering | |
Space between | justify-content: space-between | First and last at edges | |
Even distribution | justify-content: space-evenly | Equal spacing everywhere | |
Vertical layout | flex-direction: column | Vertical layout | |
Auto wrap | flex-wrap: wrap | Auto wrap when overflow | |
Equal width | flex: 1 | Equal width items | |
Fixed + fluid | flex: 0 0 200pxflex: 1 | Sidebar + main layout |
#flex Shorthand Values
| Property | Values | Description | |
|---|---|---|---|
flex: initial | = flex: 0 1 auto | Shrink only, keep basis | |
flex: auto | = flex: 1 1 auto | Can grow and shrink | |
flex: none | = flex: 0 0 auto | Fixed size, no flex | |
flex: 1 | = flex: 1 1 0 | Equal distribution |
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.