Flex使用教程

最新推荐文章于 2024-09-23 19:12:56 发布

_沧海一粟_

最新推荐文章于 2024-09-23 19:12:56 发布

阅读量6.2k

点赞数

分类专栏： css 文章标签： flex html css

本文链接：https://blog.csdn.net/Hai_Lan123/article/details/114490392

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了Flex布局中的关键属性，包括flex-direction、align-items、align-content、justify-content和flex-wrap，以及它们对元素排列和对齐的影响。通过理解这些属性，可以更好地掌握弹性盒模型在网页和应用设计中的应用。

摘要由CSDN通过智能技术生成

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: || ;

参考网址