flex的属性有哪些

flex的属性有：1、flex-direction，设置主轴的方向；2、justify-content，设置主轴上的子元素排列方式；3、flex-wrap，设置子元素是否换行；4、align-content，设置侧轴上的所有子元素排列方式；5、align-items ：设置侧轴上子元素自己的排列方式等等。

本教程操作系统：Windows10系统、Dell G3电脑。

flex的属性：

1、flex-direction

设置主轴的方向

属性值说明

row 默认值从左到右

row-reverse 从左到右

column 从上到下

column-reverse 从上到下

2、justify-content

设置主轴上的子元素排列方式

justify-content 属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定好主轴是那个

属性值说明

flex-start 默认值，从头部开始（如果主轴是X轴，则从左到右）

flex-end 从尾部开始排列

center 在主轴居中对齐（如果主轴是X轴，则水平居中）

space-around 平分剩余空间

space-between 先两边贴边，再平分剩余空间（重要）

3、flex-wrap

设置子元素是否换行

默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的

属性值说明

nowrap 默认值，不换行

wrap 换行

4、align-content

设置侧轴上的子元素排列方式（多行）

属性值 说明

flex-start 默认值，在侧轴的头部开始排列

flex-end 在侧轴的尾部开始排列

center 在侧轴的中间显示

space-around 子项在侧轴平分剩余空间

space-between 子项在侧轴先分布在两头，再平分剩余空间

stretch 设置子项元素高度平分父元素高度 align-items ：设置侧轴上的子元素排列方式（单行）

5、align-items

设置侧轴上的子元素排列方式（单行）
属性值说明

flex-start 默认值，从上到下

flex-end 从下到上

center 挤在一起居中（垂直居中）

stretch 拉伸

6、flex-flow
flex-direction 和 flex-wrap 属性的复合属性

属性值说明

flex：子项目占的份数

align-self： 控制子项在自己侧轴的排列方式

order： 属性定义子项的排列顺序（前后顺序）

以上是flex的属性有哪些的详细内容。更多信息请关注PHP中文网其他相关文章！