Flex布局常见属性图解

一、简介

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。本文中源码，并不是每次都一样，会有一些区别，比如有时没有宽度等，不要一直在一个源码上改，没有特别说明都是一个属性对一个源码。
还有就是本文说得 Flex布局的属性都是常见属性，并不是只有这些，如果想学更多属性，可以参考官网，或者其他学习网站。

二、父元素属性

2.1、flex-direction

flex-direction 顺序指定了弹性子元素在父容器中的位置，flex-direction的值有:

flex-direction: row | row-reverse | column | column-reverse

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

示例代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>.flex-container {width: 400px;height: 300px;background-color: lightblue;margin: 0 auto;	/* 水平居中 */padding: 10px; /* 内边距容易观察 */display: flex; /* 启用 Flex 布局 *//* flex-direction的取值可以为: row | row-reverse | column | column-reverse */flex-direction: row;/* flex-direction: row-reverse; *//* flex-direction: column; *//* flex-direction: column-reverse; */}.flex-item {width: 60px;height: 60px;border: 1px solid black; /* 加个边框 */background-color: orange;}</style></head><body><div class="flex-container"><div class="flex-item">item 1</div><div class="flex-item">item 2</div><div class="flex-item">item 3</div><div class="flex-item">item 4</div></div></body>
</html>

结果图如下：

在这里插入图片描述

2.2、justify-content

属性用于控制 Flex 容器内部 Flex 子项沿着主轴的对齐方式。这个属性适用于控制 Flex 容器中的内容在主轴上的排列位置。justify-content的值有:

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

flex-start：默认值。Flex 子项在主轴上与 Flex 容器的起始位置对齐
flex-end：Flex 子项在主轴上与 Flex 容器的末尾位置对齐
center：Flex 子项在主轴上居中对齐
space-between：Flex 子项沿主轴均匀分布，首尾两端不留间隙
space-around：Flex 子项沿主轴均匀分布，两侧留有相等的间隙
space-evenly: Flex 子项沿主轴均匀分布，包括首尾两端和子项之间都留有相等的间隙

示例代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>.flex-container {margin: 0 auto;	/* 水平居中 */width: 400px;height: 300px;background-color: lightblue;display: flex;flex-direction: row;/* justify-content的取值可以为：flex-start | flex-end | center | space-between | space-around |space-evenly *//* 默认值 flex-start*/justify-content: flex-start;/* justify-content: flex-end; *//* justify-content: center; *//* justify-content: space-between; *//* justify-content: space-around; *//* justify-content: space-evenly; */}.flex-item {width: 60px;height: 60px;border: 1px solid black; /* 加个边框 */background-color: orange;}</style></head><body><div class="flex-container"><div class="flex-item">item 1</div><div class="flex-item">item 2</div><div class="flex-item">item 3</div><div class="flex-item">item 4</div></div></body>
</html>

当 flex-direction: row 结果图如下：

在这里插入图片描述
在上面的源码基础上，设置 flex-direction: column 结果图如下：

在这里插入图片描述

2.3、align-items

属性用于控制 Flex 容器内部 Flex 子项在交叉轴上的对齐方式。align-items 可以设置的属性值：

align-items: stretch | flex-start | flex-end | center | baseline

stretch（默认值）：拉伸子项以填满整个交叉轴的空间
flex-start：子项在交叉轴的起点对齐
flex-end：子项在交叉轴的末端对齐
center：子项在交叉轴上居中对齐
baseline：子项根据它们的基线（如果有）对齐

示例代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>.flex-container {margin: 0 auto;	/* 水平居中 */width: 400px;height: 300px;background-color: lightblue;display: flex;flex-direction: row;/* align-items的取值可以为：stretch | flex-start | flex-end | center | baseline */align-items: flex-start;/* align-items: flex-end; *//* align-items: center; *//* align-items: baseline; *//* 默认值 stretch *//* align-items: stretch; */  /* 子元素不能有高度 */}.flex-item {width: 60px;height: 60px;border: 1px solid black; /* 加个边框 */background-color: orange;}.special-item{height: 120px; /* 会覆盖上面的高度 */}</style></head><body><div class="flex-container"><div class="flex-item">item 1</div><div class="flex-item special-item">item 2</div><div class="flex-item">item 3</div><div class="flex-item special-item">item 4</div></div></body>
</html>

结果图如下：
在这里插入图片描述当 align-items: stretch 时，示例代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>.flex-container {width: 400px;height: 300px;background-color: lightblue;margin: 0 auto;	/* 水平居中 */display: flex;flex-direction: row;/* align-items的取值可以为：stretch | flex-start | flex-end | center | baseline *//* 默认值 stretch */align-items: stretch;  /* 子元素不能有高度 *//* align-items: flex-start; *//* align-items: flex-end; *//* align-items: center; *//* align-items: baseline; */}.flex-item {width: 60px;/* height: 60px; */  /* 当为stretch时去除掉高度 */border: 1px solid black; /* 加个边框 */background-color: orange;}</style></head><body><div class="flex-container"><div class="flex-item">item 1</div><div class="flex-item">item 2</div><div class="flex-item">item 3</div><div class="flex-item">item 4</div></div></body>
</html>

结果图如下：
在这里插入图片描述
当 align-items: baseline 时，示例代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>.flex-container {width: 400px;height: 300px;background-color: lightblue;margin: 0 auto;	/* 水平居中 */display: flex;flex-direction: row;/* align-items的取值可以为：stretch | flex-start | flex-end | center | baseline *//* 默认值 stretch *//* align-items: stretch; */  /* 子元素不能有高度 *//* align-items: flex-start; *//* align-items: flex-end; *//* align-items: center; */align-items: baseline;  /* 按照项目内的文字对齐 */}.flex-item {width: 60px;height: 60px;border: 1px solid black; /* 加个边框 */background-color: orange;}.special-item{height: 120px; /* 会覆盖上面的高度 */}</style></head><body><div class="flex-container"><div class="flex-item" style="padding-top: 20px;">item 1</div> <!-- 加了内边距演示 --><div class="flex-item special-item">item 2</div><div class="flex-item">item 3</div><div class="flex-item special-item">item 4</div></div></body>
</html>

结果图如下：

在这里插入图片描述

2.4、flex-wrap

在 Flex 布局中，flex-wrap 属性用于控制 Flex 容器中的 Flex 子项是否换行。flex-wrap的值有:

flex-wrap: nowrap | wrap | wrap-reverse

nowrap（默认值）：不换行，所有 Flex 子项会尽量排在一行内
wrap：允许 Flex 子项在需要时换行，第一行在上方，紧接着的行在下方
wrap-reverse：允许 Flex 子项在需要时换行，第一行在下方，紧接着的行在上方

示例代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>.flex-container {width: 500px;height: 400px;background-color: lightblue;margin: 0 auto;	/* 水平居中 */display: flex;flex-direction: row;/* flex-wrap的取值可以为：nowrap | wrap | wrap-reverse *//* 默认值 nowrap */flex-wrap: nowrap;/* flex-wrap: wrap; *//* flex-wrap: wrap-reverse; */}.flex-item {width: 100px;height: 60px;border: 1px solid black; /* 加个边框 */background-color: orange;}</style></head><body><div class="flex-container"><div class="flex-item">item 1</div><div class="flex-item">item 2</div><div class="flex-item">item 3</div><div class="flex-item">item 4</div><div class="flex-item">item 5</div><div class="flex-item">item 6</div><div class="flex-item">item 7</div></div></body>
</html>

结果图如下：

在这里插入图片描述

2.5、flex-flow

flex-flow 是一个缩写属性，结合了 flex-direction 和 flex-wrap 两个属性，用于同时设置 Flex 容器的主轴方向和子项的换行方式，flex-flow 属性的语法格式如下：

flex-flow: <flex-direction> <flex-wrap>;

这里 flex-direction、flex-wrap就是我们上面提到的取值，随意组合。

示例代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>.flex-container {width: 500px;height: 400px;margin: 0 auto;	/* 水平居中 */background-color: lightblue;display: flex;/* flex-flow的取值可以为：flex-direction 和 flex-wrap 的组合属性 */flex-flow: row wrap;/* flex-flow: column wrap; */}.flex-item {width: 100px;height: 100px;border: 1px solid black; /*加个边框*/background-color: orange;}</style></head><body><div class="flex-container"><div class="flex-item">item 1</div><div class="flex-item">item 2</div><div class="flex-item">item 3</div><div class="flex-item">item 4</div><div class="flex-item">item 5</div><div class="flex-item">item 6</div><div class="flex-item">item 7</div><div class="flex-item">item 8</div><div class="flex-item">item 9</div><div class="flex-item">item 10</div></div></body>
</html>

结果图如下：

在这里插入图片描述

2.6、align-content

align-content 属性用于控制多根轴线（Flex 容器内部的行或列）在交叉轴上的对齐方式，当有多根轴线时才会生效。它可以设置的属性值有：

align-content：stretch | flex-start | flex-end | center | space-between | space-around | space-evenly

stretch：默认值。轴线占满整个交叉轴，如果子项没有设置高度，将被拉伸至与容器相同的高度
flex-start：多根轴线在交叉轴的起始位置对齐
flex-end：多根轴线在交叉轴的末端位置对齐
center：多根轴线在交叉轴上居中对齐
space-between：轴线均匀分布在交叉轴上，首尾两根轴线与容器边框对齐，轴线之间间隔相等
space-around：轴线均匀分布在交叉轴上，轴线两侧的间隔是轴线之间间隔的一半
space-evenly：轴线均匀分布在交叉轴上，包括轴线两侧和轴线之间的间隔均相等

示例代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>.flex-container {margin: 0 auto;	/* 水平居中 */width: 500px;height: 500px;background-color: lightblue;display: flex;flex-direction: row;flex-wrap: wrap;  /* align-content得多行还有效果，所以设置换行 *//* align-content的取值可以为：stretch | center | flex-start | flex-end | space-between | space-around | space-evenly *//* 默认值 *//* align-content: stretch; */align-content: flex-start;/* align-content: flex-end; *//* align-content: center; *//* align-content: space-between; *//* align-content: space-around; *//* align-content: space-evenly; */}.flex-item {width: 100px;height: 100px;border: 1px solid black; /* 加个边框 */background-color: orange;}</style></head><body><div class="flex-container"><div class="flex-item">item 1</div><div class="flex-item">item 2</div><div class="flex-item">item 3</div><div class="flex-item">item 4</div><div class="flex-item">item 5</div><div class="flex-item">item 6</div><div class="flex-item">item 7</div><div class="flex-item">item 8</div><div class="flex-item">item 9</div><div class="flex-item">item 10</div></div></body>
</html>

结果图如下：

在这里插入图片描述
当 align-content: stretch 时示例代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>.flex-container {width: 500px;height: 500px;background-color: lightblue;margin: 0 auto;	/* 水平居中 */display: flex;flex-direction: row;flex-wrap: wrap; /* align-content得多行还有效果，所以设置换行 *//* align-content的取值可以为：stretch|center|flex-start|flex-end|space-between|space-around|space-evenly *//* 默认值 stretch*/align-content: stretch;/* align-content: flex-start; *//* align-content: flex-end; *//* align-content: center; *//* align-content: space-between; *//* align-content: space-around; *//* align-content: space-evenly; */}.flex-item {width: 100px;/* height: 100px; */ /* stretch使用时子元素不能有高度 */border: 1px solid black; /*加个边框*/background-color: orange;}</style></head><body><div class="flex-container"><div class="flex-item">item 1</div><div class="flex-item">item 2</div><div class="flex-item">item 3</div><div class="flex-item">item 4</div><div class="flex-item">item 5</div><div class="flex-item">item 6</div><div class="flex-item">item 7</div><div class="flex-item">item 8</div><div class="flex-item">item 9</div><div class="flex-item">item 10</div></div></body>
</html>

结果图如下：

在这里插入图片描述

三、子元素属性

3.1、flex

在 CSS 的 Flex 布局中，flex 属性是一个复合属性，用于设置 Flex 容器内 Flex 项目的伸缩能力、伸缩基准以及伸缩项目占据的空间比例。flex 属性可以设置三个值，分别是：

flex：flex-grow | flex-shrink | flex-basis

flex-grow：定义 Flex 项目的放大比例，默认值为 0。它决定了 Flex 项目在有剩余空间时的放大比例，如果为 0，则不放大。
flex-shrink：定义 Flex 项目的收缩比例，默认值为 1。它决定了 Flex 项目在空间不足时的收缩比例，如果为 0，则不收缩。
flex-basis：定义了 Flex 项目在分配多余空间之前，所占据的空间大小，默认值为 auto。可以设置为具体的长度值或百分比，也可以设置为 content、auto 等。

示例代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>.flex-container {width: 500px;height: 500px;background-color: lightblue;margin: 0 auto;	/* 水平居中 */display: flex;flex-direction: row;}.flex-item {width: 80px;height: 80px;border: 1px solid black; /* 加个边框 */background-color: orange;}</style></head><body><div class="flex-container"><div class="flex-item">item 1</div><div class="flex-item">item 2</div><div class="flex-item">item 3</div><div class="flex-item">item 4</div></div></body>
</html>

结果图如下：
在这里插入图片描述

3.2、align-self

align-self 属性用于覆盖 Flex 容器的 align-items 属性，单独为 Flex 项目设置在交叉轴上的对齐方式。它可以用于单个 Flex 项目，控制该项目在交叉轴上的对齐方式。

align-self：stretch | center | flex-start | flex-end | baseline | auto

auto：使用父元素（即 Flex 容器）的 align-items 值。
flex-start：项目向交叉轴起始位置对齐。
flex-end：项目向交叉轴末端位置对齐。
center：项目在交叉轴上居中对齐。
baseline：项目根据它们的基线对齐。
stretch：项目被拉伸以适应交叉轴。

示例代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>.flex-container {display: -webkit-flex;/*webkit内核的浏览器*/margin: 0 auto;	/* 水平居中 */width: 500px;height: 500px;background-color: lightblue;display: flex;flex-direction: row;align-items: flex-start;/* align-self的取值可以为：stretch | center | flex-start | flex-end | baseline | auto *//* 默认值 *//* align-self: stretch; */align-self: flex-start;/* align-self: flex-end; *//* align-self: center; *//* align-self: stretch; *//* align-self: baseline; */}.flex-item {width: 80px;height: 80px;border: 1px solid black; /*加个边框*/background-color: orange;}</style></head><body><div class="flex-container"><div class="flex-item">item 1</div><div class="flex-item" style="align-self: center;">item 2</div><div class="flex-item" style="align-self: flex-end;">item 3</div><div class="flex-item">item 4</div></div></body>
</html>

结果图如下：
在这里插入图片描述

3.3、order

在 Flex 布局中，order 属性用于控制 Flex 项目的排列顺序。它指定了 Flex 容器内各个项目的排列顺序，值为整数，可以是正数、负数或零。

默认情况下，Flex 项目的 order 属性值为 0，表示它们按照其在源代码中的顺序依次排列。当给定了不同的 order 值时，数值小的项目将优先排在前面，数值大的项目排在后面。

示例代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>.flex-container {width: 500px;height: 500px;background-color: lightblue;margin: 0 auto;	/* 水平居中 */display: flex;flex-direction: row;}.flex-item {width: 80px;height: 80px;border: 1px solid black; /* 加个边框 */background-color: orange;}</style></head><body><div class="flex-container"><div class="flex-item">item 1</div><div class="flex-item" style="order: 3;">item 2</div><div class="flex-item">item 3</div><div class="flex-item" style="order: -1;">item 4</div></div></body>
</html>