the murmurous sea

CSS: flexbox 본문

#dev/개념정리

CSS: flexbox

lunacer 2020. 4. 7. 16:24

justify-content

: aligns flex items along the main axis.

: flex-start(default) | flex-end | center | space-between | space-around

align-items

: aligns flex items along the cross axis.

: flex-start | flex-end | center | baseline | stretch(default) 

align-self

: aligns a flex item along a cross axis, overriding the align-items value.

: flex-start | flex-end | center | baseline | stretch

align-content

: aligns a flex container's lines within the flex container when there's extra space on the cross axis.

: flex-start | flex-end | center | space-between | space-around | stretch(default)


flex-direction

: defines the direction of the main axis.

: row(default) | row-reverse | column | column-reverse

flex-wrap

: specifies whether flex items are forced on a single line or can be wrapped on multiple lines.

: nowrap(default) | wrap | wrap-reverse

flex-flow

: shorthand property for 'flex-direction' and 'flex-wrap'.


order

: specifies the order of the flex item.

: 0 is default

 


https://developer.mozilla.org/en-US/docs/Glossary/Flex

'#dev > 개념정리' 카테고리의 다른 글

Poptrox  (0) 2020.04.13
@-ms-viewport {width: device-width;}  (0) 2020.04.13
CSS: em vs. rem  (0) 2020.04.06
CSS: alignment  (0) 2020.04.04
CSS: inline-block  (0) 2020.04.04
Comments