48张小图带你领略Flex 布局之美

浅浅的花香味﹌ 2022-12-08 15:54 256阅读 0赞

## 前言 ##

最近在项目中，遇到布局问题，有时候，需要堆叠很多的样式，去排版，一定程度上增加了代码量，那么有没有更加方便的布局方式呢？????

48张图带你从0到1掌握flex布局方式。

`flex布局`在某种程度上，简便我们布局的一个难题，接下来的篇幅将介绍它的使用????

![format_png][] flex-布局详解

## flex基本概念 ##

要想熟练掌握flex布局的话，你需要理解两个概念：`轴`和`容器`????

![format_png 1][] flex布局基本概念

从上面图来看，我们将flex布局分为两部分讲，`轴`和`容器`。

**「轴」**

*  主轴（mian axis）
 *  交叉轴（cross axis）

**「容器」**

*  父容器（container)
 *  子容器（item）

打个预防针，`flex布局`涉及到12个CSS属性，父容器,子容器各6个。

接下来先梳理常见的属性，不常见的放在进阶部分来梳理。

### 轴 ###

我们知道，`轴`包括`主轴`和`交叉轴`,那么它们的方向是如何决定呢？我们直接从一张图看懂它????

![format_png 2][] flex轴的概念

默认情况下，**「主轴」**的方向是从左向右的，**「交叉轴」**垂直于主轴，逆时针方向90度，那么接下来我们看**「flex-direction」**是如何决定主轴的。讲这个之前，我们需要明白????

*  交叉轴是由主轴决定的，主轴又是由flex-direction决定的。
 *  flex-direction属性设置在父容器上，这样子才可以生效。

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

![format_png 3][] flex-direction取值

首先布局如下????

<div class="wrapper">
            <div class="flex1">子盒子#flex1: 1 </div>
            <div class="flex2">子盒子#flex2: 1 </div>
    </div>

接下来，我们看看他们的效果吧????

--------------------

#### flex-direction: row ####

当你给父盒子(wrapper)设置属性
    flex-direction: row

效果????

![format_png 4][] flex-direction-row

**「结论」**

*  flex容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
 *  简单理解就是**「主轴沿着水平方向向右」**

--------------------

#### flex-direction: row-reverse ####

当你给父盒子(wrapper)设置属性
    flex-direction: row-reverse

效果????

![format_png 5][] flex-direction-row-reverse

我们可以看到这两个盒子的位置发生了变化，这个就是主轴起点和主轴终点位置**「置换」**的原因。

**「结论」**

*  表现和row相同，但是置换了主轴起点和主轴终点。
 *  简单理解就是**「主轴沿着水平方向向左」**，与文本方向相反。

--------------------

#### flex-direction: column ####

当你给父盒子(wrapper)设置属性
    flex-direction: column

效果????

![format_png 6][] flex-direction-column

可以看到，子盒子的布局发生了变化，形成了在Y轴上的布局方式,并且书写方式跟布局一样。

**「结论」**

*  flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
 *  简单的理解，就是主轴变成Y轴方向，方向从上到下布局。

--------------------

#### flex-direction: column-reverse ####

当你给父盒子(wrapper)设置属性
    flex-direction: column-reverse

效果????

![format_png 7][] flex-direction-column-reverse

可以看到，子盒子的布局跟column差不多，唯一不同的是，方向上发生了变化。

**「结论」**

*  表现和`column`相同，但是置换了主轴起点和主轴终点
 *  简单的理解，就是主轴变成Y轴方向，方向从下到上，与书写的方向相反。

--------------------

### 容器 ###

这里就分为**「父容器」**和**「子容器」**，我们先来看看父容器????

#### 父容器 ####

*  justify-content:  **「设置子元素在主轴方向上的对齐方式」**
 *  align-items：**「设置子元素在交叉轴方向上的对齐方式」**

![format_png 8][] 父容器常见属性

--------------------

#### justify-content ####

这个属性设置在父容器上，**「决定子元素在主轴方向上的对齐方式」**，我们看看它们具体表现吧????

--------------------

#### justify-content: flex-start ####

当你给父盒子(wrapper)设置属性
    justify-content: flex-start

效果????

![format_png 9][] justify-content-flex-start

**「结论」**，子元素沿着主轴方向开始对齐。

--------------------

#### justify-content: flex-end ####

当你给父盒子(wrapper)设置属性
    justify-content: flex-end

效果????

![format_png 10][] justify-content-flex-end

**「结论」**，子元素沿着主轴方向终点对齐。

--------------------

#### justify-content: center ####

当你给父盒子(wrapper)设置属性
    justify-content: center

效果????

![format_png 11][] justify-content-center

**「结论」**，子元素在主轴方向上水平居中。

--------------------

#### justify-content: space-between ####

当你给父盒子(wrapper)设置属性
    justify-content: space-between

效果????

![format_png 12][] justify-content-space-between

**「结论」**，子元素在主轴方向上**「两端对齐，项目之间间隔相等」**。

--------------------

#### justify-content: space-around ####

当你给父盒子(wrapper)设置属性
    justify-content: space-around

效果????

![format_png 13][] justify-content-space-around

**「结论」**，子元素在主轴方向上**「均匀排列每个元素，每个元素周围分配相同的空间」**。

--------------------

#### align-items ####

这个属性设置在父容器上，**「决定子元素在交叉轴方向上的对齐方式」**，我们看看它们具体表现吧????

--------------------

#### align-items: flex-start ####

当你给父盒子(wrapper)设置属性
    align-items: flex-start

![format_png 14][] align-items-flex-start

**「结论」**，子元素在交叉轴方向上起点对齐。

--------------------

#### align-items: flex-end ####

当你给父盒子(wrapper)设置属性
    align-items: flex-end

![format_png 15][] align-items-flexend

**「结论」**，子元素在交叉轴方向上终点对齐。

--------------------

#### align-items: center ####

当你给父盒子(wrapper)设置属性
    align-items: center

![format_png 16][] align-items-center

**「结论」**，子元素在交叉轴方向上居中对齐。

--------------------

#### align-items: baseline ####

当你给父盒子(wrapper)设置属性
    align-items: baseline

![format_png 17][] align-items--baseline

**「结论」**，子元素在交叉轴方向上以文字基线对齐，具体不清楚的，可以自行百度。

--------------------

#### align-items: stretch ####

当你给父盒子(wrapper)设置属性
    align-items: stretch

![format_png 18][] align-items-stretch

**「结论」**，这个属性是默认的，如果项目未设置高度或者设为 auto，将占满整个容器的高度。

--------------------

#### 子容器 ####

先看张图片

![format_png 19][] 子容器常见的属性

子容器的话，这里就介绍两个属性????

*  `flex`属性 定义在主轴是如何伸缩的
 *   *  子容器是有弹性的，它们会自动填充剩余空间，子容器的伸缩比由`flex`属性决定。
     *  flex是多个属性的缩写，允许1-3个值的连写，具体参考上面的图。
 *  `align-self`属性 **「单独设置子容器如何沿交叉轴排列」**
 *   *  每个子容器都可以单独定义沿交叉轴排列方式。
     *  该属性的取值跟父容器中的align-items属性一致，如果两者相同的话，则以子容器`align-self`属性为主。

#### flex作用规则 ####

*  三个属性的简写，是flex-grow  flex-shrink flex-basis的简写
 *  常用简化写法????
 *   *  flex:1 —>  flex:1 1 0%;
     *  flex:3 —> flex:3 1 0%;
     *  注意:flexbox布局和原来的布局是两个概念，部分css属性在flexbox盒子里面不起作用，eg：float， clear， column,vertical-align 等等

注意????flex-grow  flex-shrink flex-basis 这三个属性会在后续介绍

具体的flex取值问题，可以参照下面的图????

![format_png 20][] flex取值问题

--------------------

#### **「align-self作用规则」** ####

// 起始端对齐
    align-self : flex-start;

![format_png 21][] align-self-flexStart

--------------------

// 末尾段对齐
    align-self : flex-end;

![format_png 22][] align-self-flex-end

--------------------

基线对齐// 末尾段对齐
    align-self : baseline;

![format_png 23][] align-self-baseline

可以看到的话，它们对齐的方式是第一行文字的基线。

--------------------

拉伸对齐
    align-self : stretch;

![format_png 18][] align-items-stretch

--------------------

## flex更深入了解 ##

上面介绍的常见几个属性掌握的话，基本上可以满足日常的开发布局需求，剩下的一些属性，接下来将梳理一遍，这样子的话，早日成为`flex布局进阶者`。

### 父容器 ###

*  **「flex-wrap」**  设置换行方式
 *   *  绝对子容器是否可以选择换行，一般而言有三种状态，支持换行的话，也支持逆序换行。
 *  **「flex-flow」** 设置轴向与换行组合
 *   *  是 flex-direction 和 flex-wrap 的简写。
     *  所以只要掌握，`flex-direction` 和 `flex-wrap`即可。
 *  **「align-content」**  多行沿交叉轴对齐方式
 *   *  当子容器多行排列时，设置行与行之间的对齐方式。

--------------------

#### flex-wrap ####

设置子容器的换行方式，通常有三个取值????

flex-wrap: wrap | nowrap | wrap-reverse

三种情况????

--------------------

// 允许换行
    flex-wrap : wrap

效果????

![format_png 24][] flex-wrap-wrap

--------------------

// 不允许换行
    flex-wrap : nowrap

效果????

![format_png 25][] flex-wrap-nowrap

--------------------

// 允许逆向换行
    flex-wrap : wrap-reverse

效果????

![format_png 26][] flex-wrap-wrapReverse

--------------------

#### flex-flow ####

先来一张图????

![format_png 27][] flex-flow取值

`更多取值信息请查看` `flex-direction` 和 `flex-wrap`

可以查看MDN上，或者把之前的`flex-direction` 和 `flex-wrap` 两者取值看过一遍，那么使用这个属性就没有问题啦，这里也就不过多的举例子了，取值有三种情况????

*  单独设置flex-direction取值，比如
 *   *      flex-flow: row | column
 *  单独设置flex-wrap取值
 *   *      flex-flow: wrap | nowrap | wrap-reverse
 *  同时设置两者取值
 *   *      flex-flow: row wrap
            flex-flow: column nowrap

--------------------

#### align-content ####

这个属性是定义子容器在交叉轴的排列方式，也就是对齐方式。

首先上一张图????

![format_png 28][] align-content取值

根据这些取值，我们来看看布局效果吧????

--------------------

// 起始端对齐
    align-content: flex-start

效果????

![format_png 29][] align-content-flex-start

--------------------

// 末尾段对齐
    align-content: flex-end

效果????

![format_png 30][] align-content-flex-end

--------------------

// 居中对齐
    align-content: center

效果????

![format_png 31][] align-content-center

--------------------

// 等间距均匀分布
    align-content: space-between

效果????

![format_png 32][] align-content-space-around

--------------------

// 等边距均匀分布
    align-content: space-around

效果????

![format_png 32][] align-content-space-around

--------------------

// 拉伸对齐
    align-content: stretch

效果????

![format_png 33][] align-content-stretch

--------------------

// 基线对齐
    align-content: baseline

效果????

![format_png 34][] align-content-baseline

--------------------

### 子容器 ###

*  **「flex-grow」** 设置扩展比例
 *  **「flex-shrink」** 设置收缩比例
 *  **「flex-basis」** 设置基准大小
 *  **「order」** 设置排列顺序

--------------------

#### flex-grow ####

子容器弹性伸展的比例，简单理解，就是把剩余的空间按比例分配给子容器。

我们看个例子

![format_png 35][] flex-grow取值

--------------------

#### flex-shrink ####

子容器弹性收缩的比例。简单理解，就是当你子容器超出的部分，会按照对应的比例给子容器减去对应的值。

我们来看下效果????

![format_png 36][] flex-shrink-取值为0

当取值为0时，就会溢出，那么我们给它们设置一个值????

![format_png 37][] flex-shrink-取值为1

这样子的超出的部分就会按照比列减去。

--------------------

#### flex-basis ####

有几个点需要注意的是????

*  在不伸缩的情况下，`flex-basis`给子容器设置大小才有作用。
 *  当主轴为横向时，即????
 *   *      flex-direction：row | row-reverse
     *  `flex-basis`设置的大小为宽度，并且会覆盖witdh值
 *  当主轴为纵向时，即????
 *   *      flex-direction：column | column-reverse
     *  `flex-basis`设置的大小为高度，并且会覆盖height值

我们来看看两种情况????

当主轴为横向时
    flex-direction：row | row-reverse

效果????

![format_png 38][] flex-basis-主轴横向时

--------------------

当主轴为纵向时
    flex-direction：column | column-reverse

效果????

![format_png 39][] flex-basis-主轴纵向时

--------------------

#### order ####

*  每个子容器的`order`属性默认为0
 *  通过设置`order`属性值，改变子容器的排列顺序。
 *  可以是负值，数值越小的话，排的越靠前。

直接看效果图????

![format_png 40][] flex-order

--------------------

## 总结 ##

这个时候，是不是需要总结一下呢????

先看看子容器属性????

![format_png 41][] flex-子容器属性

--------------------

再看看父容器属性????

![format_png 42][] flex-父容器属性

梳理的是常见的属性值，对于一些不常见的属性值，请移步MDN

## ❤️看完三件事 ##

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点赞，让更多的人也能看到介绍内容（收藏不点赞，都是耍流氓-\_-）
2.  关注公众号“前端劝退师”，不定期分享原创知识。
3.  也看看其他文章

![format_png 43][]

劝退师个人微信：**huab119**

也可以来我的`GitHub`博客里拿所有文章的源文件：

**前端劝退指南**：https：//github.com/roger-hiro/BlogFN一起玩耍呀

在看、点赞、转发支持作者❤️

[format_png]: /images/20221123/625a9bb2d8d84aec82984147c636c9d9.png
[format_png 1]: /images/20221123/ddf1e2b544b1445ba68642f0ccc0edc9.png
[format_png 2]: /images/20221123/a00e5f9b32524c61953c8aa545981803.png
[format_png 3]: /images/20221123/0f20b71e2ee64ea59bd6f279a2da6704.png
[format_png 4]: /images/20221123/150cf46597e9414ab503943e9b378a0c.png
[format_png 5]: /images/20221123/89b4702223474b8a85d0431ca1a63d5a.png
[format_png 6]: /images/20221123/0175d9f314de4fca846ebaa95b171635.png
[format_png 7]: /images/20221123/44b40c59a8824b9ca2bbc0ab7171faf1.png
[format_png 8]: /images/20221123/b92187aa8aae4bc48e9f0cc7fe6499af.png
[format_png 9]: /images/20221123/3bbc051535ed404ab4378f30fdf87501.png
[format_png 10]: /images/20221123/67180533e275409c9fe7517ad6d2a6c4.png
[format_png 11]: /images/20221123/e0e4a7f5141b4d22b3d02f9261866973.png
[format_png 12]: /images/20221123/8e3d895923494b7990f84cbdf16baf6a.png
[format_png 13]: /images/20221123/24e070e1c0414880a7c57a549d0f29aa.png
[format_png 14]: /images/20221123/e56703fd7aae45b4a2d04af9cd0dac8f.png
[format_png 15]: /images/20221123/46476fa8bf184f2d985d9dc011f8959b.png
[format_png 16]: /images/20221123/44c3fa98d9ab490c809dd77bc89db5cc.png
[format_png 17]: /images/20221123/68f5d5c5b0e242b0a910cb27cd672769.png
[format_png 18]: /images/20221123/7247e9d7697b48e8ba8f4c804535d238.png
[format_png 19]: /images/20221123/a1b3db13246f472f92ca9dd2bb7e9df6.png
[format_png 20]: /images/20221123/95ca9adc0eb54764a5a9d702484074df.png
[format_png 21]: /images/20221123/c56e03e07b0544dd8cd54e93cc9ccedf.png
[format_png 22]: /images/20221123/0e116720c7764ed99d1ff0621fd28085.png
[format_png 23]: /images/20221123/b02524cf6a1b4fcc921220e3e86f7ab1.png
[format_png 24]: /images/20221123/ac10608e5d2748f8be6137c6f6f33145.png
[format_png 25]: /images/20221123/1b4a449026214a4baa9b9181daca29fe.png
[format_png 26]: /images/20221123/f7330b6fa5da4bb999d8153a586da669.png
[format_png 27]: /images/20221123/f63c16deac4e4595a6f5ee00ce7b37e4.png
[format_png 28]: /images/20221123/07911d59ad5a4656ab3f90eda17d9196.png
[format_png 29]: /images/20221123/10386a07183940d8af9653be40bdc7c0.png
[format_png 30]: /images/20221123/fedbdd0fe9654f8aa829ac7710acfc89.png
[format_png 31]: /images/20221123/1ffbf554470349da8a9e53c7f3cfc583.png
[format_png 32]: /images/20221123/d8070dee09164cf58a274df3afa68e3b.png
[format_png 33]: /images/20221123/e5377478fe4a4b66aa2955e191c13753.png
[format_png 34]: /images/20221123/801bceb33e754528bd403ae6bf5b07c6.png
[format_png 35]: /images/20221123/8377c7bf0a874d7f9e7f7911b9a92727.png
[format_png 36]: /images/20221123/268d4023e4464cb5a5550a37ce48f17c.png
[format_png 37]: /images/20221123/c1ece3c5049f46c1944bceccf2c74428.png
[format_png 38]: /images/20221123/bf24712668e1467ca60cfdc297b27fe5.png
[format_png 39]: /images/20221123/f0dd50abd18c43c1895ff8325bb84f50.png
[format_png 40]: /images/20221123/9f9fcf896eb4405d8a4d85cfc023b5e2.png
[format_png 41]: /images/20221123/b8f3bf333ef94ed380a045511edd3a52.png
[format_png 42]: /images/20221123/eb67981edd5b452e883d97dde8d2bfd3.png
[format_png 43]: /images/20221123/f5b4098fea33464f8cfffb65d2765337.png