dialog布局比例失效_动画 | 一文掌握 Flex 布局

Myth丶恋晨 2023-01-10 09:53 67阅读 0赞

写在前边

![781d82c95a27bf667de20126a4dae508.png][]

网页布局，是前端入门的时候必学、必须熟练的一门技术，学到什么程度算是入门了呢？随便给你一个网站，你就可能快速的分析出网页的结构，然后搭建出模型，这是前端网页布局入门的最基本要求。

作为一个前端初学者，在学习的时候可能会用到一些盒模型传统的布局方式(`display + position + float`)，很多小伙伴用着用着就觉得这种传统布局写一些样式比较麻烦、不方便，比如垂直居中的传统实现方式如。

第一种实现方式：

原本外容器没有设置高度的时候会紧贴内元素，但是设置容器内的上下内边距相同的数值时，此时就实现了垂直居中。

![cc25ede9075ccbf43ae85ca4f80a8ad5.png][]

第二种实现方式：

使用 Vertical-align 属性实现垂直居中。

但是这个属性往往初学者容易弄混，不知道何时才使用，有时元素设置这个属性并生效，这是怎么回事呢？也是初学者往往最头疼的一个问题，这个属性涉及到的内容不是一篇两篇文章写完的，这篇我们不多涉及到。

第三种实现方式：

使用 line-height 设置父容器行高的方式进行垂直居中，但是只适用单行文本。

其实垂直居中网页布局中传统实现方式很多种，但是这么多种不同情况下进行选择太麻烦了，我们有没有规定一个方式就能无论是行内元素还是块元素就能实现垂直居中呢？

我们尝试今天要分享的 Flex 试一下垂直居中实现如下：

![8ee1b54981d31b748ed10f2928725b97.png][]

只需在外容器的 CSS 中设置这两个属性就可以轻松实现垂直居中。

完整代码实现如下：

![a7d33c7592624206f7db53cf8e21549c.png][]

是不是第二种非常的方便？其实就是一句垂直居中代码，align-items: center;

那么今天小鹿就来分享一种新布局方式，可能对于刚学习前端的小伙伴来说是种新的，但是作为一些进阶者，这种布局经常在项目中被灵活使用，得到了很多开发者的喜爱，用着用着就爱上了这种布局的方式 —— Flex布局。

看完这篇文章，小鹿也会通过生动有趣的动画，让你爱上 Flex 布局。

思维导图

![781d82c95a27bf667de20126a4dae508.png][] ![08a03d13ec2a38c7f8a9b981d78ed3a5.png][]

什么是 Flex 布局？

Flex 布局又为弹性布局，所谓弹性，就很大的提供了页面布局的灵活性。

我们可以把一个容器(div、span等)，设置它的 CSS 的 display 属性为 flex 之后，我们就可以使用 Flex 的布局方式了。

![69bc67bd32c9309041740278b2884064.png][] ![637f4434b2a7f7d5cdf52ae6425d198a.png][]

PS：一旦容器设置`display: flex`布局之后，我们使用的传统布局中的`float、vertical-align、clear`等属性就完全失效了。但是我们可以通过 Flex 设置的属性去进行布局。

认识 Flex 布局

因为我们再用传统布局的时候，对齐元素进行垂直居中，代码特别的麻烦，为了更好的解决这个问题，Flex 布局就规定设置横、纵两个方向，我们无论在水平排列还是垂直排列的时候，这样写起来更方便了。

![e31d7037b6a337d8ab3175fd8905b35c.png][]

而且 Flex 布局设置了三个位置，左边、中间、右边，而且都有对应的属性，就可以很轻松的设置元素的位置了。

![a730f0ea731c524012b8a93511998099.gif][]

光说不练假把式，我们就开始动手写代码实践一下，跟着小鹿一起打开编译器。

容器的基本属性

**3.1 flex-direction**

这个属性主要用来调节布局元素的方向的，比如你想纵向排列。如下：

flex-direction: column

![50102608e221589c4f75e770709a5a7e.gif][]

横向排列，如下：

flex-direction: column

![5feae0a0bf81f859298a320c3079a956.gif][]

常用的就是上边这两个，其他两个相反方向的排列方式：

`flex-direction: column-reverse;`

`flex-direction: row-reverse;`

**3.2 flex-wrap**

这个作为换行属性，如果当元素一行摆放不开了，我们需要选择如何换行？不换行还是换行，还是换行到第一行的上方呢？

![af12e097ee8a18eac9b3a7bca7a0498a.png][]

**(1)**`nowrap`**不换行 **

![809a3f939bd4f054f92ae29659c62e64.gif][]

**(2)**`wrap`**换行 **

![b3e1e2591f41c04bb1fed43a6495919e.gif][]

**(3)**`wrap-reverse`**换到第一行**

![e01eece70a56ef66ae2161f813a2a074.gif][]

我们通过上边的属性很容易实现的。

**3.3 justify-content**

之前我们传统布局的水平居中有这几种方式：

![a38e451b6224c400167f8d602f4b69d2.png][]

但是在 Flex 布局几种水平位置的布局。这样用起来让页面的布局更加的灵活、多变。

![706f809b02fdee3dd96649b817037abe.png][]

**(1)**`flex-start`**(默认) ：****左对齐**

![b63f1f1e273172ec187c7b78533e47ff.png][]

**(2)**`flex-end`**：****右对齐**

![b1c52c470eb23637e7f52cb2a596b852.png][]

**(3)**`center`**：****居中**

![0744680621b20a798a52f8d7224558ef.png][]

**(4)**`space-between`**：****两端对齐，项目之间的间隔都相等**

![bc87660ff39410593ded6852b54d36f0.png][]

**(5)**`space-around`**：****每个项目两侧的间隔相等。**

![b9a847e3c7566aa739c2d7f45562f72b.png][]

**3.4 align-items**

既然有水平居中，那么就有垂直居中，垂直居中上边我们也说过，传统的布局比较麻烦，所以我们要见识一下 Flex 布局的强大之处。

![4a0e9a0740603a8878c3566dd30d84b8.png][]

通过这个`align-items`属性值，很轻松的实现垂直居中。

**(1)**`flex-start`**：****交叉轴的起点对齐。**

![b5179cf9be0679ade60021bee87f65d5.png][]

**(2)**`flex-end`**：****交叉轴的终点对齐。**

![e9fec1064409be0de70f8147261a3e7d.png][]

**(3)**`center`**：****交叉轴的中点对齐。**

![282d09787294d564a95b459eb830253e.png][]

**(4)**`baseline`**：****项目的第一行文字的基线对齐。**

![a7896b4ed0f85ca02e97404fda90328a.png][]

**(5)**`stretch`**：****如果项目未设置高度或设为auto，将占满整个容器的高度。**

![4e65d4894c3bd117cdac9ed4c216ec86.png][]

容器内单个元素属性

我们上边是针对外容器的一些属性设置，我们下边的一些属性是针对于容器内元素的一些属性设置。让我们呢一个个来看一下最常用的。

**4.1 flex-grow**

该属性主要用来定义元素的放大比例，它的默认值是 0。

![c45602ac4286ad502885d42ea23780d4.png][] ![54226ab13b85e9fe9210dc603ab87b61.png][]

如果容器内的所有元素都设置为 1，则平分剩余的空间；如果其中一个设置为 2，则按比例平分剩余的空间。

**4.2 flex-shrink**

该属性主要用来定义元素的缩小比例，默认值为 1。

![39590c4ec67b9b164c5ae4ac2d1de1c1.png][] ![a571e0b16051da3f122ee473fe067ce4.png][]

如果所有元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个元素的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

**4.3 flex-basis**

浏览器会根据该属性进行对主轴计算是否有多余的空间。默认值为 auto。

![b958751baa82f88068aa757df8849930.png][]

**4.4 flex**

该属性是以上三个属性的缩写形式，默认值为`0 1 auto`。

![7d180f73cd5aa6e5fa81226a90fff388.png][]

还有两个其他的快捷属性，`auto(1 1 auto)` 和`none(0 0 auto)`，浏览器会根据其推算相关的数值。

小结

![781d82c95a27bf667de20126a4dae508.png][]

我们今天学了 Flex 布局之后，是不是非常的简单，妈妈再也不用担心你的布局了。

之所以分享这篇文章，因为我在交流群里看到很多初学者一直在用传统的 DIV 进行布局，所以简单的通过一篇文章的介绍，让你知道除了传统布局外，还有 Flex 布局、网格布局，在快捷的布局就是UI框架了。比如`Bootstrap、Element-ui`等。

一般框架会在项目开发中使用的较多，对于初学者的话，还是建议自己亲手搭建布局，上边几个 Flex 属性是常用的，如果想深入学习，请查看官方文档。

![8a217edba1e5b43d05ebbff1d760a14e.png][]

[781d82c95a27bf667de20126a4dae508.png]: /images/20221119/64c9c747008f489ba4cc2804b509a902.png
[cc25ede9075ccbf43ae85ca4f80a8ad5.png]: /images/20221119/01214a1b633348db8fd8fbf6e5904586.png
[8ee1b54981d31b748ed10f2928725b97.png]: /images/20221119/60aa137010de42a1b0ca2622675f5be4.png
[a7d33c7592624206f7db53cf8e21549c.png]: /images/20221119/57b3672c353b402fbc3d025793159d77.png
[08a03d13ec2a38c7f8a9b981d78ed3a5.png]: /images/20221119/b97203dfb8f54a6597c40f1e1ea7740d.png
[69bc67bd32c9309041740278b2884064.png]: https://img-blog.csdnimg.cn/img_convert/69bc67bd32c9309041740278b2884064.png
[637f4434b2a7f7d5cdf52ae6425d198a.png]: /images/20221119/a4fa5bc004a04fd79df950a0a301bc01.png
[e31d7037b6a337d8ab3175fd8905b35c.png]: /images/20221119/02d9cfd1c3764428bae57ec8b13cbd2b.png
[a730f0ea731c524012b8a93511998099.gif]: /images/20221119/8ef409a90a0042b29e1f2a1387bfe9e5.png
[50102608e221589c4f75e770709a5a7e.gif]: /images/20221119/f8533e3bd60a4def9e5687fafa382352.png
[5feae0a0bf81f859298a320c3079a956.gif]: /images/20221119/eba85db6c5304c828f0995cfc6500de7.png
[af12e097ee8a18eac9b3a7bca7a0498a.png]: /images/20221119/18cc2ab482cd49f4a0ebc395767fa898.png
[809a3f939bd4f054f92ae29659c62e64.gif]: /images/20221119/dce768fb4dda432591cebb3abaf93f14.png
[b3e1e2591f41c04bb1fed43a6495919e.gif]: /images/20221119/b9d1a827402c4cdeb5f564a0feb697ca.png
[e01eece70a56ef66ae2161f813a2a074.gif]: /images/20221119/15336f10b8324e9292fc39e7366e366a.png
[a38e451b6224c400167f8d602f4b69d2.png]: /images/20221119/6aa2710dbf544bec83ea153db573b48c.png
[706f809b02fdee3dd96649b817037abe.png]: /images/20221119/2b6dd4ff9ee2464db388cb18f42370fa.png
[b63f1f1e273172ec187c7b78533e47ff.png]: /images/20221119/d9e2f7355bf346a6adbc612741d70861.png
[b1c52c470eb23637e7f52cb2a596b852.png]: /images/20221119/213b49f919224d1ab3353b385978d6ba.png
[0744680621b20a798a52f8d7224558ef.png]: /images/20221119/5b4537ba85b84a64a12db8de4d3b9e24.png
[bc87660ff39410593ded6852b54d36f0.png]: /images/20221119/85696b9f34784feea99695036c77b4ba.png
[b9a847e3c7566aa739c2d7f45562f72b.png]: /images/20221119/9b6d29ca52934d019182550181dc962e.png
[4a0e9a0740603a8878c3566dd30d84b8.png]: /images/20221119/dc5c6dace6ec49aea9e65621f9975545.png
[b5179cf9be0679ade60021bee87f65d5.png]: /images/20221119/45ecb674efb94013aaa58d0eb9788783.png
[e9fec1064409be0de70f8147261a3e7d.png]: /images/20221119/019d80202b2443d8958cb12d332d3ae2.png
[282d09787294d564a95b459eb830253e.png]: /images/20221119/422cc6fa12cf4c708b5d7041b92eca28.png
[a7896b4ed0f85ca02e97404fda90328a.png]: /images/20221119/a0173919dc5a4b94ac6e4e724cf79043.png
[4e65d4894c3bd117cdac9ed4c216ec86.png]: /images/20221119/ea8f35d6a4dd4972a0b69ccbcbbd4413.png
[c45602ac4286ad502885d42ea23780d4.png]: https://img-blog.csdnimg.cn/img_convert/c45602ac4286ad502885d42ea23780d4.png
[54226ab13b85e9fe9210dc603ab87b61.png]: /images/20221119/95d8fe7b94894f8ebbe15819a4368200.png
[39590c4ec67b9b164c5ae4ac2d1de1c1.png]: https://img-blog.csdnimg.cn/img_convert/39590c4ec67b9b164c5ae4ac2d1de1c1.png
[a571e0b16051da3f122ee473fe067ce4.png]: /images/20221119/2e9639d55bd44b429fed29fa39aa2901.png
[b958751baa82f88068aa757df8849930.png]: /images/20221119/56f2c91ad2384400b6e83847b28ddb2a.png
[7d180f73cd5aa6e5fa81226a90fff388.png]: /images/20221119/0013d32aa4734661803a67fe07808e8a.png
[8a217edba1e5b43d05ebbff1d760a14e.png]: /images/20221119/e91bb6cd1e19438580ef6a0aba117ac9.png