【教程】flex-direction属性的使用教程天天头条

来源：CSDN 时间：2023-04-28 10:20:42

(资料图片仅供参考)

Flex使用教程

1. flex-direction该属性决定元素的排列方向，有4个值： 1、row（默认，主轴为水平方向，起点在左端） 2、row-reverse（主轴为水平方向，起点在右端） 3、column（主轴为垂直方向，起点在上边） 4、column-reverse（主轴为垂直方向，起点在下边）

2. align-items该属性是定义子元素的对齐方式，有5个值： 1、center（垂直居中对齐） 2、flex-start（顶部对齐） 3、flex-end（底部对齐） 4、stretch（默认值，如果项目未设置高度或设为auto，将占满整个容器的高度） 5、baseline（项目的第一行文字的基线对齐）

3. align-content该属性定义了多行的对齐方式，只有一行不起作用，有6个值： 1、center（多行元素垂直居中对齐） 2、flex-start（顶部对齐） 3、flex-end（底部对齐） 4、stretch（默认值，将占满整个容器的高度） 5、space-between（以元素两边对齐） 6、space-around（所有子元素间隔距离相等）

4. justify-conetnt该属性定义了在主轴上的定义方式，根据flex-direction不同而不同，它有5个值： 1、center（居中对齐） 2、flex-start（默认值，左对齐） 3、flex-end（右对齐） 4、space-between（两端对齐，元素之间的间隔都相等） 5、space-around（每个元素两侧的间隔相等。元素之间的间隔比元素与两边边框的间隔大一倍）

5. flex-wrap该属性定义元素一行排不下如何换行，有3个值： 1、nowrap（默认，不换行） 2、wrap（换行，第一行在上方） 3、wrap-reverse（换行，第一行在上方）

6. flex-flow该属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap 格式： flex-flow: || ;

标签：

上一篇：微信小程序开发多少钱？怎么看价格成本？环球今日讯
下一篇：最后一页

【教程】flex-direction属性的使用教程 天天头条

【教程】flex-direction属性的使用教程天天头条