flex常用属性有哪些

Author: 陌小雨Date: 2023-07-04View: 920

CSS Flex常用属性有以下几个:

1. display:设置为flex或者inline-flex,将元素设置为弹性盒子。

2. flex-direction:设置主轴的方向,可以是row(水平方向)、column(垂直方向)、row-reverse(水平方向,反向)或column-reverse(垂直方向,反向)。

3. justify-content:设置主轴上的对齐方式,可以是flex-start(起点对齐)、flex-end(终点对齐)、center(居中对齐)、space-between(两端对齐,中间间距平均分配)或space-around(每个元素两侧间距相等,平均分配)。

4. align-items:设置交叉轴上的对齐方式,可以是flex-start(起点对齐)、flex-end(终点对齐)、center(居中对齐)、baseline(基线对齐)或stretch(拉伸填充)。

5. flex-wrap:设置元素的换行方式,可以是nowrap(不换行)、wrap(换行)、wrap-reverse(反向换行)。

6. align-content:设置多行元素在交叉轴上的对齐方式,可以是flex-start(起点对齐)、flex-end(终点对齐)、center(居中对齐)、space-between(两端对齐,中间间距平均分配)或space-around(每个元素两侧间距相等,平均分配)。

7. flex:设置元素在弹性盒子中的弹性因子,可以是一个数字,表示元素占据剩余空间的比例,也可以是auto,表示元素不参与计算。

这些属性可以帮助我们更好地控制弹性布局中的元素排列方式和对齐方式。

返回列表页>