CSS学习 Flex布局自我学习记录

容器6属性 display:flex

flex-direction:

row 默认值 | row-reverse | column | column-reverse

flex-wrap

wrap | nowrap 默认值 | wrap-reverse

flex-flow

flex-flow: <flex-direction> || <flex-wrap>;

justify-content

flex-start 默认值 | flex-end | center | space-between | space-around;

align-items

flex-start | flex-end | center | baseline | stretch 默认值;

align-content

flex-start | flex-end | center | space-between | space-around | stretch 默认值;

align-items 与 align-content的区别在于是否有wrap行为，如有则align-content是从整体考虑，而align-items仅仅是从当行考虑。

项目6属性

order（顺序）

flex-grow 默认0，存在剩余空间也不放大

flex-shrink 默认1，如空间不足，则项目缩小

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

align-self

参考资料:

https://www.runoob.com/w3cnote/flex-grammar.html