Flex布局
2020-02-19 09:57:56 24 举报AI智能生成
CSS Flex布局基本属性
作者其他创作
大纲/内容
<b>Flex容器<br>(flex container)</b>
flex-direction<br>(决定项目排列方向)
row | row-reverse | column | column-reverse
flex-wrap<br>(定义如何换行)
nowrap | wrap | wrap-reverse
flex-flow<br>(flex-direction和flex-wrap的简写形式)
justify-content<br>(定义项目在主轴上的对齐方式,<br><font color="#c41230">注意主轴的方向是垂直还是水平<br>取决于flex-direction的取值,默认是水平</font>)
flex-start | flex-end | center | space-between | space-around
align-items<br>(定义项目在交叉轴上的对齐方式<br><font color="#c41230">交叉轴的方向是垂直轴,不会变</font>)
flex-start | flex-end | center | baseline | stretch
align-content<br>(定义多条轴线的对齐方式)
flex-start | flex-end | center | space-between | space-around | stretch
<b>Flex项目<br>(flex item)</b>
order<br>(定义项目的排列顺序)
order: <integer>;<br>数值越小，排列越靠前，默认为0
flex-grow<br>(定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大)
flex-shrink<br>(定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小)
flex-basis<br>(定义在分配多余空间之前，项目占据的主轴空间)
flex<br>(flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto)
align-self<br>(定义单个项目的对齐方式，可覆盖容器的align-items属性,<br>为默认值为auto，表示继承父元素的align-items属性)
auto | flex-start | flex-end | center | baseline | stretch
职业：暂无
0 条评论
下一页
