CSS布局----flex弹性布局(移动端完美解决方案）

不念不忘少年蓝@ 2022-11-15 14:08 279阅读 0赞

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性。

我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局网格布局，以后会和大家讲到

# 目录 #

1，如何使用  
2， Flexbox的两根轴线  
3， Flex 容器  
4，API以及用例

1，- 如何使用-因为css用法过于简单，所以先给大家介绍简单的使用方法，随后介绍一些重要的概念

效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU0NjUyMg_size_16_color_FFFFFF_t_70][]

2，- Flexbox的两根轴线

当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 [`flex-direction`][flex-direction] 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它。

### 主轴 ###

主轴由 flex-direction 定义，可以取4个值：

*  row
 *  row-reverse
 *  column
 *  column-reverse  
    如果你选择了 row 或者 row-reverse，你的主轴将沿着 inline 方向延伸。

如果你选择了 `row` 或者 `row-reverse`，你的主轴将沿着 \*\*inline \*\*方向延伸。

![20210401173509644.png][]

选择 `column` 或者 `column-reverse` 时，你的主轴会沿着上下方向延伸 — 也就是 **block 排列的方向。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU0NjUyMg_size_16_color_FFFFFF_t_70 1][]

### 交叉轴 ###

交叉轴垂直于主轴，所以如果你的`flex-direction` (主轴) 设成了 `row` 或者 `row-reverse` 的话，交叉轴的方向就是沿着列向下的。

![20210401173606510.png][]

如果主轴方向设成了 `column` 或者 `column-reverse`，交叉轴就是水平方向。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU0NjUyMg_size_16_color_FFFFFF_t_70 2][]

理解主轴和交叉轴的概念对于对齐 flexbox 里面的元素是很重要的；flexbox 的特性是沿着主轴或者交叉轴对齐之中的元素。

### Flex 容器 ###

文档中采用了 flexbox 的区域就叫做 flex 容器。为了创建 flex 容器， 我们把一个容器的 [`display`][display] 属性值改为 `flex` 或者 `inline-flex。` 完成这一步之后，容器中的直系子元素就会变为 **flex 元素**。所有CSS属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：

*  元素排列为一行 (`flex-direction` 属性的初始值是 `row`)。
 *  元素从主轴的起始线开始。
 *  元素不会在主维度方向拉伸，但是可以缩小。
 *  元素被拉伸来填充交叉轴大小。
 *  [`flex-basis`][flex-basis] 属性为 `auto。`
 *  [`flex-wrap`][flex-wrap] 属性为 `nowrap。`

这会让你的元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。

### Flex布局主要的API ###

`display: flex; 规定元素应该生成flex的类型，直系子元素就会变为 flex 元素`  
`flex-direction: row | column | row-reverse | column-reverse; 更改flex方向`

为了更好地控制 flex 元素，有三个属性可以作用于它们：在使用这三个属性之前我们简单了解一下布局空白（available space）这个概念

![20210401173637830.png][]

`flex-grow` 定义了该元素的布局空白（available space）的基准值。 该属性的默认值是 auto 。此时，浏览器会检测这个元素是否具有确定的尺寸。 在上面的例子中, 所有元素都设定了宽度（width）为100px，所以 flex-basis 的值为100px。

如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸。这就解释了：我们给只要给Flex元素的父元素声明 display: flex ，所有子元素就会排成一行，且自动分配小大以充分展示元素的内容。

`flex-shrink` flex-grow 若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的布局空白（available space）。如果有其他元素也被允许延展，那么他们会各自占据布局空白的一部分。

如果我们给上例中的所有元素设定 flex-grow 值为1， 容器中的布局空白会被这些元素平分。它们会延展以填满容器主轴方向上的空间。  
flex-grow 属性可以按比例分配空间。如果第一个元素 flex-grow 值为2， 其他元素值为1，则第一个元素将占有2/4（上例中，即为 200px 中的 100px）, 另外两个元素各占有1/4（各50px）。

`flex-basis`属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。"

这三个属性为了方便编码，我们一般都会混合着写在 [`flex`][flex] 简写形式中:

我们来看看flex元素自适应后的效果

![20210401173653774.png][]

### flex元素对齐和空间分配 ###

`align-items`属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中的对齐方式。") 属性可以使元素在交叉轴方向对齐。  
这个属性的初始值为stretch，这就是为什么flex元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满flex容器 —— 最高的元素定义了容器的高度。

你也可以设置align-items的值为flex-start，使flex元素按flex容器的顶部对齐, flex-end 使它们按flex容器的下部对齐, 或者center使它们居中对齐. 在实例中尝试——我给出了flex容器的高度，以便你可以看到元素在容器中移动。看看如果更改 align-items的值为下列值会发生什么：

*  `stretch`
 *  `flex-start`
 *  `flex-end`
 *  `center`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU0NjUyMg_size_16_color_FFFFFF_t_70 3][]

[`justify-content`][justify-content]属性用来使元素在主轴方向上对齐，主轴方向是通过 `flex-direction` 设置的方向。初始值是`flex-start`，元素从容器的起始线排列。但是你也可以把值设置为`flex-end`，从终止线开始排列，或者`center`，在中间排列.

你也可以把值设置为`space-between`，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等。或者使用`space-around`，使每个元素的左右空间相等。

在实例中尝试下列`justify-content`属性的值：

*  `stretch`
 *  `flex-start`
 *  `flex-end`
 *  `center`
 *  `space-around`
 *  `space-between`

最终效果:  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU0NjUyMg_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU0NjUyMg_size_16_color_FFFFFF_t_70]: /images/20221022/14e366470dae42d9bbb965cfe2dd75e9.png
[flex-direction]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-direction
[20210401173509644.png]: /images/20221022/5a0dd10ec8d840d3b24882bd21a10dd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU0NjUyMg_size_16_color_FFFFFF_t_70 1]: /images/20221022/283b2510c59e4fce8f664e5f24faa528.png
[20210401173606510.png]: /images/20221022/a0cfe85cc4ea42f084915184adacf97d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU0NjUyMg_size_16_color_FFFFFF_t_70 2]: /images/20221022/9d6a7941f9fa4b8c8251db5fafbc2bdb.png
[display]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/display
[flex-basis]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis
[flex-wrap]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap
[20210401173637830.png]: /images/20221022/3545b706f8c44c208c1f8a99d6433bcf.png
[flex]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex
[20210401173653774.png]: /images/20221022/08b5db21d7d94d3481bafcb601b256a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU0NjUyMg_size_16_color_FFFFFF_t_70 3]: /images/20221022/a23224b116cb4899a22057cc664497b7.png
[justify-content]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU0NjUyMg_size_16_color_FFFFFF_t_70 4]: /images/20221022/384049265f04418fa0f7cf8392c8227c.png