【移动开发】弹性布局详细讲解

梦里梦外; 2023-09-30 18:39 3阅读 0赞

传统的布局是基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。

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

**一、什么是弹性布局?**

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

*  任何一个容器均可以指定为Flex布局

.box{
      display: flex;
    }

*  行内元素也可使用Flex布局

.box{
      display: inline-flex;
    }

*  Webkit内核的浏览器，必须加上-webkit前缀

.box{
      display: -webkit-flex; /* Safari */
      display: flex;
    }

**注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。**

**1、基本概念**

Flex的基本概念就是容器和轴，容器包括外层的父容器和内层的子容器（也叫项目，flex item），轴包括主轴和交叉轴。以下图：

![183a94e69233dd41179e3919f245a7ff.png][]

容器默认存在两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框交叉的点）叫作main start；结束的位置叫main end；交叉轴的开始位置叫cross start；交叉轴结束的未知叫cross end。

子容器（项目）默认沿主轴排列，单个项目占据的主轴空间叫作main size，占据交叉轴的空间叫cross size。

**2、容器的属性**

Flex 布局主要涉及12个属性（不含display：flex），其中容器和子容器各6各，可是日常使用到的基本只有4个属性，父容器和子容器各2个。

用于父容器的属性：

. flex-direction
    . flex-wrap
    . flex-flow
    . justify-content
    . align-items
    . align-content

用于子容器（项目）的属性：

. order
    . flex-grow
    . flex-shrink
    . flex-basis
    . flex
    . align-self

**二、什么情况下用弹性布局?**

1、以苏宁易购移动页面为例,在网页中当遇到需要将父元素按照奇数进行等分,比如携程中绿色区域是将父元素3等分.如果用流式布局那么就需要设置33.33%.如果用弹性布局只需要给每一个子元素设置一个属性flex:1即可快速实现。

![26e4455d691fcf8cd211542be03d4f07.png][]

2、以淘宝网页为例,当我们需要页面中多个子元素快速实现在父元素中以左右距离适中显示的时候,这个时候我们不需要设置任何的px值,只需要给元素设置justify-content:space-around就可以实现

![807fb237ce6c26183141cbd0cfccd428.png][]

3、以携程为例,当页面中出现子元素按照其他比例分割父元素的时候,依然可以通过弹性盒子中的flex实现快速实现.如图:红色区域是按照 1:1:1:1:1的比例显示.

![941ee347b86953b70296ab4474063cd5.png][]

在写移动端页面(包括PC端页面)遇到以上几种情况的时候,弹性布局是最好的选择。

**三、弹性布局的具体使用**

虽然弹性布局很好用,但是就是属性太多记不住而且还容易将属性对应的效果搞混,接下来给大家总结一下弹性布局中几个必须掌握的属性。

1、弹性布局第一步就是先给父元素设定为弹性盒子,既设置属性:display:flex，如代码所示:

![d3a44c16aa892ff93da01dfc7127dd46.png][]

2、设置伸缩盒子的主轴方向,默认伸缩盒子中的主轴是水平显示,所以默认元素都是一行显示的.可以通过flex-direction属性调整主轴的方向,改变元素的显示方式。

*  **flex-direction: row**

![f39da24ee8f3e9458a5a1cee4caebf53.png][]

*  **flex-direction:row-reverse**

![04d049cd97492a186fc81682e4714044.png][]

*  **flex-direction:column**

![68d19d228afc79f5aa1a53e7c7df0308.png][]

*  **flex-direction:column-reverse**

![0cba49cf1f68babe37665f43951255c6.png][]

3、设置元素在主轴方向的对齐显示方式,通过**justify-content**属性实现

*  **justify-content:flex-start**

![d847db72ec574af07c512131a975c1f4.png][]

*  **justify-content:flex-end**

![2b193d744916379ef99ed7331db4ef40.png][]

*  **justify-content:space-between**

![898a307cced414a025a667c2846b0925.png][]

*  **justify-content:space-around**

![8ba58a55faca57f15ed2c53120573665.png][]

4、设置弹性盒子中元素在侧轴(交叉轴)方向的对齐方式通过**align-items**实现。

*  **align-items: stretch**

![2a870a9da1b85ea6c3229787c760cc71.png][]

*  **align-items:flex-start**

![1ce389459781aa9d69783534547ef45a.png][]

*  **align-items:flex-end**

![279e63cf207f13a3f771e81b5f884cf3.png][]

*  **align-items:center**

![10b195cdc740be70b1bd0233cfd43ed9.png][]

5、在伸缩盒子中,默认所有的子元素超出父容器宽度后都不换行显示,如果希望让超出父元素后换行显示,可以通过**flex-wrap**属性实现

*  **flex-wrap:nowrap**

![78fc19d11876ec3be8d45026aabc4f28.png][]

*  **flex-wrap:wrap**

![4e10d8e01ece3ad77678679a518d6f35.png][]

6、在伸缩和中元素换行后设置多行对齐方式,通过**align-content**属性实现

*  **align-content:stretch**

![f8455b2a980e0e6a0a7ccd5c141f0b59.png][]

*  **align-content:flex-start**

![94446f965d13027fc7de666ad99b44b9.png][]

*  **align-content:flex-end**

![4016e30611c376434097aafeae422fe6.png][]

*  **align-content:center**

![42a529718f55624e6b41f2829560359d.png][]

*  **align-content: space-between**

![1fc72fa30eec3e42a2ee17f2cfc6adb3.png][]

*  **align-content: space-around**

![0d12ce7599e1be210f8a21989725ddbc.png][]

以上属性都是给弹性盒子设置的属性,各位小伙伴要注意.如下代码所示:

![0e743f2a24362498ffce0a1f92c403be.png][]

7、如果希望弹性盒子中子元素按照任何一个比例显示,可以给子元素设置flex属性,如下图所示:

Flex: 1代表子元素占父元素空间宽度的一份。

![78dfb93eade0ecadd41737f059e77500.png][]

Felx:2代表子元素占父元素空间宽度的2份,依次类推

![28f9d60c75af2595ddb765b76ea9fc5c.png][]

**四、弹性布局优缺点分析**

弹性布局在网页中实现快速分配比例,盒子快速对齐优势很大,因为通过简单的几个属性就可以实现,进而减少我们设置具体值.但是弹性布局中的属性对于浏览器版本要求比较严格,如果浏览器版本太低那么弹性布局中的属性是无法正常使用的.如下图所示:

![ddf1de5b0469c6cd835e18fba6586e5f.png][]

[183a94e69233dd41179e3919f245a7ff.png]: https://img-blog.csdnimg.cn/img_convert/183a94e69233dd41179e3919f245a7ff.png
[26e4455d691fcf8cd211542be03d4f07.png]: https://img-blog.csdnimg.cn/img_convert/26e4455d691fcf8cd211542be03d4f07.png
[807fb237ce6c26183141cbd0cfccd428.png]: https://img-blog.csdnimg.cn/img_convert/807fb237ce6c26183141cbd0cfccd428.png
[941ee347b86953b70296ab4474063cd5.png]: https://img-blog.csdnimg.cn/img_convert/941ee347b86953b70296ab4474063cd5.png
[d3a44c16aa892ff93da01dfc7127dd46.png]: https://img-blog.csdnimg.cn/img_convert/d3a44c16aa892ff93da01dfc7127dd46.png
[f39da24ee8f3e9458a5a1cee4caebf53.png]: https://img-blog.csdnimg.cn/img_convert/f39da24ee8f3e9458a5a1cee4caebf53.png
[04d049cd97492a186fc81682e4714044.png]: https://img-blog.csdnimg.cn/img_convert/04d049cd97492a186fc81682e4714044.png
[68d19d228afc79f5aa1a53e7c7df0308.png]: https://img-blog.csdnimg.cn/img_convert/68d19d228afc79f5aa1a53e7c7df0308.png
[0cba49cf1f68babe37665f43951255c6.png]: https://img-blog.csdnimg.cn/img_convert/0cba49cf1f68babe37665f43951255c6.png
[d847db72ec574af07c512131a975c1f4.png]: https://img-blog.csdnimg.cn/img_convert/d847db72ec574af07c512131a975c1f4.png
[2b193d744916379ef99ed7331db4ef40.png]: https://img-blog.csdnimg.cn/img_convert/2b193d744916379ef99ed7331db4ef40.png
[898a307cced414a025a667c2846b0925.png]: https://img-blog.csdnimg.cn/img_convert/898a307cced414a025a667c2846b0925.png
[8ba58a55faca57f15ed2c53120573665.png]: https://img-blog.csdnimg.cn/img_convert/8ba58a55faca57f15ed2c53120573665.png
[2a870a9da1b85ea6c3229787c760cc71.png]: https://img-blog.csdnimg.cn/img_convert/2a870a9da1b85ea6c3229787c760cc71.png
[1ce389459781aa9d69783534547ef45a.png]: https://img-blog.csdnimg.cn/img_convert/1ce389459781aa9d69783534547ef45a.png
[279e63cf207f13a3f771e81b5f884cf3.png]: https://img-blog.csdnimg.cn/img_convert/279e63cf207f13a3f771e81b5f884cf3.png
[10b195cdc740be70b1bd0233cfd43ed9.png]: https://img-blog.csdnimg.cn/img_convert/10b195cdc740be70b1bd0233cfd43ed9.png
[78fc19d11876ec3be8d45026aabc4f28.png]: https://img-blog.csdnimg.cn/img_convert/78fc19d11876ec3be8d45026aabc4f28.png
[4e10d8e01ece3ad77678679a518d6f35.png]: https://img-blog.csdnimg.cn/img_convert/4e10d8e01ece3ad77678679a518d6f35.png
[f8455b2a980e0e6a0a7ccd5c141f0b59.png]: https://img-blog.csdnimg.cn/img_convert/f8455b2a980e0e6a0a7ccd5c141f0b59.png
[94446f965d13027fc7de666ad99b44b9.png]: https://img-blog.csdnimg.cn/img_convert/94446f965d13027fc7de666ad99b44b9.png
[4016e30611c376434097aafeae422fe6.png]: https://img-blog.csdnimg.cn/img_convert/4016e30611c376434097aafeae422fe6.png
[42a529718f55624e6b41f2829560359d.png]: https://img-blog.csdnimg.cn/img_convert/42a529718f55624e6b41f2829560359d.png
[1fc72fa30eec3e42a2ee17f2cfc6adb3.png]: https://img-blog.csdnimg.cn/img_convert/1fc72fa30eec3e42a2ee17f2cfc6adb3.png
[0d12ce7599e1be210f8a21989725ddbc.png]: https://img-blog.csdnimg.cn/img_convert/0d12ce7599e1be210f8a21989725ddbc.png
[0e743f2a24362498ffce0a1f92c403be.png]: https://img-blog.csdnimg.cn/img_convert/0e743f2a24362498ffce0a1f92c403be.png
[78dfb93eade0ecadd41737f059e77500.png]: https://img-blog.csdnimg.cn/img_convert/78dfb93eade0ecadd41737f059e77500.png
[28f9d60c75af2595ddb765b76ea9fc5c.png]: https://img-blog.csdnimg.cn/img_convert/28f9d60c75af2595ddb765b76ea9fc5c.png
[ddf1de5b0469c6cd835e18fba6586e5f.png]: https://img-blog.csdnimg.cn/img_convert/ddf1de5b0469c6cd835e18fba6586e5f.png