Flex弹性布局，满足你所有姿势

我会带着你远行 2022-12-19 00:58 86阅读 0赞

# 一、简介 #

flex布局（也叫弹性布局）是比传统方式更加灵活的布局模式。  
随着IE浏览器的逐渐消失，PC端也迎来了对flex的全面支持，flex布局注定会成为更为流行的布局方案。

内容上下左右居中，是我们常见的一个布局需求。  
但是使用传统布局方式却很难实现，而使用flex布局可以轻松实现。

**上下左右居中示例**  
样式：

.container { 
    	display: flex; /*开启容器的flex布局*/
    	justify-content :center;/*主轴居中*/
    	align-items:center;/*纵轴居中*/
    }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left]

> flex布局是uni-app框架官方推荐布局模式。

# 二、布局结构 #

flex布局主要有外层元素和直接子元素构成。

*  外层元素叫 flex container（容器）
 *  直接子元素叫 flex items （项目）

> 注意，以下样式截图中，容器设置了padding，故项目没有完全靠边。

# 三、如何使用 #

直接在样式中设置display值为flex或inline-flex即可。

*  flex (块级原素)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 1]
 *  inline-flex (行内元素)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 2]

# 四、布局模型 #

从左上角开始，x轴叫main axis （主轴），y轴叫cross axis（侧轴/纵轴）。  
元素的宽称为main size;高称为cross size。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 3]

# 五、容器的属性 #

## 1、flex-direction ##

控制项目排列方向。

*  row：横向，从左到又（`默认`）。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 4]
 *  row-reverse ：横向反向，及从右到左。  
    ![在这里插入图片描述][20201108160923477.png_pic_left]
 *  column：纵向，及从上到下。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 5]
 *  column-reverse：纵向反向，及从下到上。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 6]

## 2、flex-wrap ##

控制项目换行。

*  nowrap：不换行（`默认`）。  
    内容超过容器宽度时会压缩项目宽度。  
    ![在这里插入图片描述][2020110917590766.png_pic_left]
 *  wrap：换行。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 7]
 *  wrap-reverse：换行反向。  
    第一行会到底部。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 8]

## 3、flex-flow ##

是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列且不换行。

## 4、justify-content ##

控制项目在主轴的对齐方式。

*  flex-start：主轴开始位置及对齐（默认）  
    ![在这里插入图片描述][20201111143336816.png_pic_left]
 *  center：居中对齐  
    ![在这里插入图片描述][20201111143642125.png_pic_left]
 *  flex-end：主轴结束位置对齐  
    ![在这里插入图片描述][20201111143415738.png_pic_left]
 *  space-between：左右两端对齐  
    ![在这里插入图片描述][20201111143823612.png_pic_left]
 *  space-evenly：项目之间间距为左右两侧项目到容器间距的2倍  
    ![在这里插入图片描述][20201111144005181.png_pic_left]
 *  space-around：项目之间间距与项目与容器间距相等  
    ![在这里插入图片描述][20201111144038562.png_pic_left]

## 5、align-items ##

控制项目在纵轴排列方式。

*  stretch：目没设置高度，或高度为auto，则占满整个容器（默认）。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 9]
 *  flex-start：项目在纵轴紧贴容器顶部。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 10]
 *  center：项目在纵轴居中。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 11]
 *  flex-end：项目在纵轴紧贴容器底部。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 12]
 *  baseline：项目以第一行文字的基线为参照进行排列。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 13]

## 6、align-content ##

控制多行项目的对齐方式。

*  stretch：项目没设置高度，或高度为auto情况下让项目填满整个容器（默认）。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 14]
 *  flex-start：项目在纵轴紧贴容器顶部。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 15]
 *  center：项目纵轴居中。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 16]
 *  flex-end：项目在纵轴紧贴容器底部。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 17]
 *  space-between：上下两侧项目紧贴容器。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 18]
 *  space-around：项目之间间距为上下两端项目与容器间距两倍。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 19]
 *  space-evenly：项目之间间距与项目到容器之间间距相等。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 20]

# 六、元素的属性 #

## 1、order ##

项目排序，值越小越靠前；默认值为0。

![在这里插入图片描述][20201111153821325.png_pic_left]  
`x1(x2)`==>x1为固有顺序，x2为order值。

## 2、flex-grow ##

项目在有剩余空间的情况下是否放大，值越大放大越多；默认值为0及不放大。  
![在这里插入图片描述][20201111154214108.png_pic_left]

## 3、flex-shrink ##

项目在空间不足时是否缩小，值越大缩小越多;默认值为1，值为0时及不缩小。  
![在这里插入图片描述][20201111154449621.png_pic_left]

## 4、flex-basis ##

设置项目宽度，覆盖widtn属性；默认auto。

## 5、flex ##

是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度；默认0 1 auto。

## 6、align-self ##

继承父容器的**align-items**属性，如果没父元素，则默认stretch。

.container { 
    	display: flex; /*开启容器的flex布局*/
    	flex-direction: column;/*纵向排列*/
    	align-items:  flex-start;/*主轴方向居中*/
    }
    
    .2{ 
    	align-self:flex-start;/*第二个靠左*/
    }
    .3{ 
    	align-self:flex-end;/*第三个靠右*/
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 21]

# 示例代码 #

*  源代码
    
        <!DOCTYPE html>
        <html>
        	<head>
        		<meta charset="utf-8">
        		<title></title>
        	</head>
        	<style> .container { /*容器的基础样式*/ width: 500px; height: 500px; background-color: #f3f4f6; padding: 20px; margin: 20px; border-radius: 20px; /*flex布局*/ display: flex; justify-content :center;/*主轴居中*/ align-items:center;/*纵轴居中*/ } .items { /*元素的基础样式*/ text-align: center; border-radius: 10px; width: 100px; height: 100px; line-height: 100px; } </style>
        	<body>
        		<div class="container">
        			<div class="items" style="background-color: #2b85e4;align-self:flex-start;">1</div>
        			<div class="items" style="background-color: #a0cfff;">2</div>
        			<div class="items" style="background-color: #ecf5ff;align-self:flex-end">3</div>
        		</div>
        	</body>
        </html>
 *  布局效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 22]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left]: /images/20221120/1d96ef9267a048d792e2f2dc82139e0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 1]: /images/20221120/8aec9022b5a84f42804e20d4ad4d86c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 2]: /images/20221120/39eb1971248d408ca34b8b3ff1d61f8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 3]: /images/20221120/89353aec10ca4917bb2306bb03644788.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 4]: /images/20221120/3b8df351df1447cabf675b78d7c8f2a0.png
[20201108160923477.png_pic_left]: /images/20221120/edae5e8ed91c43f1b135ddca71430ded.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 5]: /images/20221120/75e122f7fa34449d9e7d3a6958cd8182.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 6]: /images/20221120/9e0f44962c474312adc4b98c8a438d7f.png
[2020110917590766.png_pic_left]: /images/20221120/f93a05498cd346bea345218725fc9ae2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 7]: /images/20221120/d8ed73f6c4634df1839d9ab9b092dcb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 8]: /images/20221120/6218a354de854949adf78a622329e536.png
[20201111143336816.png_pic_left]: /images/20221120/cc543c496f254ecab4f99c904012fdc4.png
[20201111143642125.png_pic_left]: /images/20221120/71460bf4b54d4bd8873c0f96323a826f.png
[20201111143415738.png_pic_left]: /images/20221120/2b061b54cb7f4aa798d3209d237ed17c.png
[20201111143823612.png_pic_left]: /images/20221120/d3b29b676fef433dbda2e125467553c6.png
[20201111144005181.png_pic_left]: /images/20221120/e2c08b4811234143a4802d72926f2388.png
[20201111144038562.png_pic_left]: /images/20221120/0ed139febac24d4d9454867dac8b5730.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 9]: /images/20221120/29b7f861d3f84b7a97e65e8f14188f3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 10]: /images/20221120/8616958848d2404ba458c2b8794398ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 11]: /images/20221120/172a23e3e12c4025b760d78823cec3fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 12]: /images/20221120/f48421293f6f46b3b4900f0943cf7b1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 13]: /images/20221120/c5b902564c0044e5ad11f9db7a3d6225.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 14]: /images/20221120/8c84ec3f15b34969b5ad79c44403e8d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 15]: /images/20221120/cfb471f3dbd3460eaf1481000f543ac8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 16]: /images/20221120/b504ccb78b1041a4a3ae9f1abe14949c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 17]: /images/20221120/cfd483cc0ab041af839f977fc864b7ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 18]: /images/20221120/044dc260bace446f82f57cc325a2a2ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 19]: /images/20221120/b2ce3a2fa575413e9143ec9a92d037eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 20]: /images/20221120/c6a8bf32806c42aca60f77eea034c969.png
[20201111153821325.png_pic_left]: /images/20221120/faa8cac6743e4e07b61f22001d9d5ba2.png
[20201111154214108.png_pic_left]: /images/20221120/9e273030cb974001a2ddf13f2036cb2c.png
[20201111154449621.png_pic_left]: /images/20221120/0b8966eba4bb4985a21f3c381a7e2752.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 21]: /images/20221120/2b9fb14d9ab24ce98d46f25daf935e93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_left 22]: /images/20221120/e68ccdba101e48f488ee5ad27fa19829.png