Flex布局--笔记---flex详细知识点

新手村程序猿&

已于 2024-05-30 15:53:46 修改

阅读量674

点赞数 12

分类专栏：小程序开发文章标签：笔记

于 2024-05-29 15:55:34 首次发布

本文链接：https://blog.csdn.net/wj0712/article/details/139297377

版权

小程序开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1flex布局：

基本理解：flex布局是一种灵活的布局模型，主要用于对容器内的子元素进行排列和对齐。在使用时，首先需要将父容器设置为flex容器，内部子元素称为flex项目，根据flex容器的属性进行排列和布局。

2flex父容器

通过设置display属性为flex或者inline-flex。

display: flex; 使元素成为块级Flex容器。

display: inline-flex; 使元素成为内联Flex容器。

1.2flex父容器主要属性：

flex-direction:    定义主轴的方向（水平或垂直）。

                row（默认）主轴为水平方向，从左到右排列。

                row-reverse 主轴为水平方向，从右到左排列。

                column 主轴为垂直方向，从上到下排列。

                column-reverse 主轴为垂直方向，从下到上排列。

flex-wrap: 定义项目是否换行。

                                nowrap（默认）                ：不换行。

                                 wrap                                : 换行，第一行在上方。

                                  wrap-reverse                : 换行，第一行在下方。

flex-flow: flex-direction和flex-wrap的简写形式，默认值为row nowrap。

justify-content: 定义项目在主轴上的对齐方式。

                flex-start（默认）                ：从主轴起点对齐。

                flex-end                                : 从主轴终点对齐。

                center                                        : 居中对齐。

                space-between             : 项目之间的间隔相等，第一项在起点，最后一项在终点。

                space-around                : 项目之间的间隔相等，每个项目周围的间隔相等。

align-items: 定义项目在交叉轴上的对齐方式。

                stretch（默认）                ：拉伸以填充容器。

                flex-start                                : 从交叉轴起点对齐。

                flex-end                                : 从交叉轴终点对齐。

                center                                : 居中对齐。

                baseline                                : 项目基线对齐。

align-content: 定义多根轴线的对齐方式，如果存在多行项目。

stretch（默认）                        ：拉伸以填充容器。

flex-start                                        : 从交叉轴起点对齐。

flex-end                                : 从交叉轴终点对齐。

center                                : 居中对齐。

space-between           : 轴线之间的间隔相等，第一根轴线在起点，最后一根轴线在终点。

space-around                        : 轴线之间的间隔相等，每根轴线周围的间隔相等。

3flex项目（子容器）

Flex项目是Flex容器内的子元素，它们会根据Flex容器的属性进行排列和布局。

Flex项目的主要属性：

order: 定义项目的排列顺序，数值越小，排列越靠前，默认值为0。

flex-grow: 定义项目的放大比例，当容器有剩余空间时，按照该比例放大，默认值为0（即不放大）。

flex-shrink: 定义项目的缩小比例，当容器空间不足时，按照该比例缩小，默认值为1（即允许缩小）。

flex-basis: 定义项目在分配多余空间之前的初始大小，可以是绝对值（如50px）或百分比（如20%），默认值为auto。

flex: flex-grow、flex-shrink和flex-basis的简写形式，例如flex: 1 0 auto。

align-self: 允许单个项目有与其他项目不同的对齐方式，覆盖align-items属性。

auto（默认）：继承align-items属性的值。

flex-start: 从交叉轴起点对齐。

flex-end: 从交叉轴终点对齐。

center: 居中对齐。

baseline: 项目基线对齐。

stretch: 拉伸以填充容器。

4相关代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局示例</title>
<style>
.container {
display: flex;
flex-direction: row; /* 主轴方向 */
flex-wrap: wrap; /* 是否换行 */
justify-content: space-between; /* 主轴对齐方式 */
align-items: center; /* 交叉轴对齐方式 */
height: 200px;
border: 1px solid black;
}

.item {
background-color: lightblue;
padding: 20px;
margin: 5px;
flex: 1 1 auto; /* 简写形式：flex-grow, flex-shrink, flex-basis */
}

.item:nth-child(2) {
align-self: flex-end; /* 覆盖align-items属性 */
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>
</html>

在这个示例中：

.container 是Flex容器，通过 display: flex; 定义。
.item 是Flex项目，它们会根据Flex容器的属性进行排列和布局。
flex-direction: row; 使项目在水平主轴上排列。
justify-content: space-between; 使项目在主轴上的间隔相等。
align-items: center; 使项目在交叉轴上居中对齐。
第二个项目通过 align-self: flex-end; 覆盖了 align-items: center; 属性，使其在交叉轴上对齐到末端。

希望这些详细的解释和示例代码能帮助你更好地理解和使用Flex布局。