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