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
参考资料:
下一篇: 如何在C#项目中使用NHibernate