HMLT&CSS&JS/CSS
[css-flex]
turfrain
2022. 8. 11. 11:03
| Flex Container | CSS Flex Items (ie11) | ||||||
| flex-direction: | row |  |
(기본값) | order | number | 0 | 플렉스 항목의 순서지정 |
| column |  |
flex-grow | number | 1 | 아이템 비해 얼마나 커질지 | ||
| row-reverse |  |
flex-shrink | number | 1 | 아이템 비해 얼마나 작아질지 | ||
| column-reverse |  |
flex-basis | px | auto | 초기 길이를 지정 | ||
| flex-wrap: | nowrap |  |
(기본값) | ||||
| wrap |  |
align-self | auto | align-items : 설정 재정의 | |||
| align-content: | normal | (기본값) | stretch |  |
|||
| center |  |
center |  |
||||
| flex-start |  |
flex-start |  |
||||
| flex-end |  |
flex-end |  |
||||
| space-around |  |
baseline |  |
||||
| space-between |  |
flex | initial | 0 1 auto |
flex-grow, flex-shrink, flex-basis 약식속성 or 단일크기 (px, %) | ||
| stretch |  |
auto | 1 1 auto |
0 은 basis 크기 | |||
| justify-content: | normal | (기본값) | none | 0 0 auto | 1 은 듄등 크기 | ||
| center |  |
||||||
| flex-start |  |
||||||
| flex-end |  |
||||||
| space-between |  |
||||||
| space-around |  |
||||||
| space-evenly |  |
||||||
| align-items: | normal | (기본값) | |||||
| center |  |
||||||
| flex-start |  |
||||||
| flex-end |  |
||||||
| stretch |  |
||||||
| baseline |  |
||||||