欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-30 12:08:57
...

容器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

相关标签: Flex布局