控制一堆元素的排列方式, 可以选择换不换行,方向等。
轴
justify : 主轴 ||| align : 副轴
flex-direction为row时水平为主轴,垂直为副轴。
外层
•
display : flex
•
flex-direction : row | column | row-reverse | column-reverse
•
flex-wrap : nowrap | wrap | wrap-reverse ; reverse 是第一行在最下面。
•
flex-flow : flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
•
justify-content : flex-start | center | flex-end | space-around | space-between | space-evenly ; 主轴上内容的对齐方式
•
align-items : flex-start | center | flex-end | baseline | stretch ; 副轴上内容的对齐方式
•
align-content : flex-start | flex-end | center | space-between | space-around | stretch ; 多根轴线之间的对齐方式,也就是换行的。
元素上
flex-grow : 数组,可小数, 元素的比例,
flex-shrink : 缩小比例, 元素超过外层而需要缩小的时候谁比例大谁缩小的多。设为0不缩小
flex-basic : 定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。
可设置 固定的, 百分比, fit-content ,max-content,min-content,content,fill, 默认的auto是说参照我的width和height。
order : 越小越靠前
align-self : auto | flex-start | flex-end | center | baseline | stretch ; 单独分配对齐方式。
❕
设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
评论区