10、flex应用

电玩女神 2022-04-04 15:13 149阅读 0赞

flex布局在原来的旧版上已经做了很多改动，但很多应用还是应用的旧版的，下面分别对照两种版本进行分析。

## 一、flex旧版 ##

在对需要使用flex布局的容器上使用display: -webkit-box。  
**1、-webkit-box-orient容器的布局方向**  
\-webkit-box-orient属性本质上确定了主轴是哪一根，因为容器内的内容默认是按主轴进行排列的。可选值包括：

*  horizontal:x轴
 *  vertical:y轴  
    默认是按x轴进行排列的。

示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			
    			#wrap{
    				width: 300px;
    				height: 300px;
    				border: 1px solid;
    				margin: 100px auto;
    				background: greenyellow;
    				/*控制flex*/
    				display: -webkit-box;
    				/*-webkit-box-orient可取horizontal或vertical*/
    				-webkit-box-orient: horizontal;
    			}
    			
    			#wrap > .item{
    				width: 50px;
    				height: 50px;
    				background: red;
    				text-align: center;
    				line-height: 50px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="item">a</div>
    			<div class="item">b</div>
    			<div class="item">c</div>
    			<div class="item">d</div>
    		</div>
    	</body>
    </html>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MDIxMDE_size_16_color_FFFFFF_t_70]

**2、-webkit-box-direction容器排列方向**  
\-webkit-box-direction属性本质上改变了主轴的方向，可选值如下：

*  normal：如果指定normal，主轴是x轴时，主轴的方向指向右；主轴是y轴时，主轴的方向指向下；
 *  reverse：如果指定reverse，主轴是x轴时，主轴的方向指向左；主轴是y轴时，主轴的方向指向上。

示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			
    			#wrap{
    				width: 300px;
    				height: 300px;
    				border: 1px solid;
    				margin: 100px auto;
    				background: greenyellow;
    				/*控制flex*/
    				display: -webkit-box;
    				/*-webkit-box-orient可取horizontal或vertical*/
    				-webkit-box-orient: horizontal;
    				/*-webkit-box-direction指定主轴的方向*/
    				-webkit-box-direction: reverse;
    			}
    			
    			#wrap > .item{
    				width: 50px;
    				height: 50px;
    				background: red;
    				text-align: center;
    				line-height: 50px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="item">a</div>
    			<div class="item">b</div>
    			<div class="item">c</div>
    			<div class="item">d</div>
    		</div>
    	</body>
    </html>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MDIxMDE_size_16_color_FFFFFF_t_70 1]

**notice**：不管主轴的方向如何，容器内的内容始终是按主轴的正方向进行排列的。

**3、-webkit-box-pack内容两侧空间管理**  
\-webkit-box-pack可以控制容器内部内容两侧多余的空间排列位置。  
**-webkit-box-pack控制主轴上多余空间的位置**，可选值如下：

*  start：主轴为x轴时，多余空间在右边；主轴为y轴时，多余空间在下边；
 *  end：主轴为x轴时，多余空间在左边；主轴为y轴时，多余空间在上边；
 *  center：多余空间在内容的两侧；
 *  justify：多余空间在内容之间的两侧。

示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			
    			#wrap{
    				width: 100px;
    				height: 100px;
    				border: 1px solid;
    				margin: 100px auto;
    				background: greenyellow;
    				/*控制flex*/
    				display: -webkit-box;
    				/*-webkit-box-orient可取horizontal或vertical*/
    				-webkit-box-orient: horizontal;
    				/*-webkit-box-direction指定主轴的方向*/
    				-webkit-box-direction: normal;
    				-webkit-box-pack: justify;
    			}
    			
    			#wrap > .item{
    				width: 20px;
    				height: 20px;
    				background: red;
    				text-align: center;
    				line-height: 20px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="item">a</div>
    			<div class="item">b</div>
    			<div class="item">c</div>
    			<div class="item">d</div>
    		</div>
    	</body>
    </html>

效果如下：  
![在这里插入图片描述][20181217223511101.png]

**-webkit-box-align控制侧轴上的多有空间的位置**，可选内容如下：

*  start：主轴为x轴时，侧轴的多余空间在下方；主轴为y轴时，侧轴的多余空间在右边；
 *  end：主轴为x轴时，侧轴的多余空间在上方；主轴为y轴时，侧轴的多余空间在左边；
 *  center：多余空间在内容的两边。

示例如下：

效果如下： !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20181217224520208.png)

**4、-webkit-box-flex弹性空间的管理**  
\-webkit-box-flex将多余空间均匀的分布在容器中各个项目上。  
示例如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			
    			#wrap{
    				width: 200px;
    				height: 200px;
    				border: 1px solid;
    				margin: 100px auto;
    				background: greenyellow;
    				/*控制flex*/
    				display: -webkit-box;
    				/*-webkit-box-orient可取horizontal或vertical*/
    				-webkit-box-orient: horizontal;
    				/*-webkit-box-direction指定主轴的方向*/
    				-webkit-box-direction: normal;
    				-webkit-box-pack: start;
    			}
    			
    			#wrap > .item{
    				width: 20px;
    				height: 20px;
    				background: red;
    				text-align: center;
    				line-height: 20px;
    				-webkit-box-flex: 1;
    			}
    			
    			#wrap > .item:nth-child(2){
    				-webkit-box-flex: 3;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="item">a</div>
    			<div class="item" style="background: yellow;">b</div>
    			<div class="item">c</div>
    			<div class="item">d</div>
    		</div>
    	</body>
    </html>

容器中第一个项目、第三个项目、第四个项目分别占比 1 ，第二个项目占比 3 ，第一个项目、第三个项目、第四个项目所占长度为 (200-80)\* 1/6=20，20+20=40，第二个项目所占长度为(200-80)\*3/6=60,60+20=80。  
效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MDIxMDE_size_16_color_FFFFFF_t_70 2]

## 二、flex新版 ##

在对需要使用flex布局的容器上使用display: flex  
**1、flex-direction容器的布局方向**  
flex-direction确定了哪一个轴是主轴，可选值有：

*  column：y轴为主轴；
 *  row：x轴为主轴。

示例如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			
    			#wrap{
    				width: 100px;
    				height: 100px;
    				border: 1px solid;
    				margin: 100px auto;
    				background: greenyellow;
    				/*控制flex*/
    				display: flex;
    				flex-direction: row;
    			}
    			
    			#wrap > .item{
    				width: 20px;
    				height: 20px;
    				background: red;
    				text-align: center;
    				line-height: 20px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="item">a</div>
    			<div class="item">b</div>
    			<div class="item">c</div>
    			<div class="item">d</div>
    		</div>
    	</body>
    </html>
    效果如下：

![在这里插入图片描述][20181217225652475.png]

**2、flex-direction容器排列方向**  
flex-direction除了上面可以定义主轴，还可以定义主轴的方向，可选值包括：

*  row-reverse：主轴方向与x轴相反，指向左侧；
 *  column-reverse：主轴与y轴相反，指向上方。  
    示例如下：

效果如下：  
![在这里插入图片描述][20181219201538837.png]

**3、多余空间管理**  
justify-content用于管理主轴上的多余空间管理，align-items用于管理侧轴上的多余空间管理。  
**justify-content管理主轴时**，可选值如下：

*  flex-start：多余空间在主轴上的正方向；
 *  flex-end：多余空间在主轴上的反方向；
 *  center：多余空间分布在主轴的两边；
 *  space-between：多余空间平均分配在容器内部项目的之间；
 *  space-around：多余空间平均分配在容器内部项目的两边。

示例如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			
    			#wrap{
    				width: 100px;
    				height: 100px;
    				border: 1px solid;
    				margin: 100px auto;
    				background: greenyellow;
    				/*控制flex*/
    				display: flex;
    				flex-direction: row;
    				justify-content: space-around;
    			}
    			
    			#wrap > .item{
    				width: 20px;
    				height: 20px;
    				background: red;
    				text-align: center;
    				line-height: 20px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="item">a</div>
    			<div class="item">b</div>
    			<div class="item">c</div>
    			<div class="item">d</div>
    		</div>
    	</body>
    </html>

效果如下：  
![在这里插入图片描述][20181219202837433.png]

align-items用于管理侧轴多余空间时，可选值如下：

*  flex-start：多余空间在侧周的正方向，即y轴的正方向；
 *  flex-end：多余空间在侧住的反方向，即y轴的反方向；
 *  content：多余空间分布在侧轴的两边；
 *  baseline：容器内的项目向最靠近侧轴方向的项目并齐；
 *  stretch：容器内的项目向最靠近侧轴反方向的项目并齐。

示例如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			
    			#wrap{
    				width: 100px;
    				height: 100px;
    				border: 1px solid;
    				margin: 100px auto;
    				background: greenyellow;
    				/*控制flex*/
    				display: flex;
    				flex-direction: row;
    				justify-content: flex-start;
    				align-items: center;
    			}
    			
    			#wrap > .item{
    				width: 20px;
    				height: 20px;
    				background: red;
    				text-align: center;
    				line-height: 20px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="item">a</div>
    			<div class="item">b</div>
    			<div class="item">c</div>
    			<div class="item">d</div>
    		</div>
    	</body>
    </html>

效果如下：  
![在这里插入图片描述][20181219205016640.png]

示例如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			
    			#wrap{
    				width: 100px;
    				height: 100px;
    				border: 1px solid;
    				margin: 100px auto;
    				background: greenyellow;
    				/*控制flex*/
    				display: flex;
    				flex-direction: row;
    				justify-content: flex-start;
    				align-items: stretch;
    			}
    			
    			#wrap > .item{
    				width: 20px;
    				height: 20px;
    				background: red;
    				text-align: center;
    				line-height: 20px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="item" >a</div>
    			<div class="item" style="margin-top: 10px;">b</div>
    			<div class="item">c</div>
    			<div class="item">d</div>
    		</div>
    	</body>
    </html>

效果如下：  
![在这里插入图片描述][20181219205555698.png]

**4、flex-grow弹性空间管理**  
同旧版本-webkit-box-flex的用法相同。  
示例如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			
    			#wrap{
    				width: 200px;
    				height: 200px;
    				border: 1px solid;
    				margin: 100px auto;
    				background: greenyellow;
    				/*控制flex*/
    				display: flex;
    				flex-direction: row;
    				justify-content: flex-start;
    				align-items: stretch;
    			}
    			
    			#wrap > .item{
    				width: 20px;
    				height: 20px;
    				background: red;
    				text-align: center;
    				line-height: 20px;
    				flex-grow: 1;
    			}
    			
    			#wrap > .item:nth-child(2){
    				flex-grow: 3;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="item" >a</div>
    			<div class="item" style="background: yellow;">b</div>
    			<div class="item">c</div>
    			<div class="item">d</div>
    		</div>
    	</body>
    </html>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MDIxMDE_size_16_color_FFFFFF_t_70 3]

**5、flex-wrap多行空间排列**  
当容器中主轴方向排列不开项目时，默认是挤压项目的，此种情况下，就可以flex-wrap设置是否向侧轴方向上继续排列。可选值如下：

*  nowrap 默认值，不包括，项目挤压排列；
 *  wrap 第一行主轴上项目排列超出容器时，继续向侧轴正方向上排列；
 *  wrap-reverse 第一行主轴上项目超出容器时，继续向侧轴反方向上排列。  
    示例如下：

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MDIxMDE_size_16_color_FFFFFF_t_70 4]

**6、align-content定义侧轴上有多行/列时，如何布局**  
align-content需要与flex-wrap一起连用，可选值如下：

*  stretch：拉伸所有行/列来填满剩余空间。剩余空间平均的分配给每一行/列，默认值；
 *  flex-start：所有行/列从侧轴起点开始填充。第一行/列的侧轴起点边和容器的侧轴起点边对齐，接下来的每一行/列紧跟前一行/列；
 *  flex-end：所有弹性元素从侧轴末尾开始填充。最后一个弹性元素的侧轴终点和容器的侧轴终点对齐，同时所有后续元素与前一个对齐；
 *  center：所有行/列朝向容器的中心填充。每行/列互相紧挨，相对于容器居中对齐，容器的侧轴起点边和第一行/列的距离相等于容器的侧轴终点边和最后一行/列的距离；
 *  space-between：所有行/列在容器中平均分布。相邻两行/列间距相等，容器的侧轴起点边和终点边分别与第一行/列和最后一行/列的边对齐；
 *  space-around：所有行/列在容器中平均分布，相邻两行/列间距相等，容器的侧轴起点边和终点边分别与第一行/列和最后一行/列的距离是相邻两行/列间距的一半。

示例如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			
    			#wrap{
    				width: 100px;
    				height: 100px;
    				border: 1px solid;
    				margin: 100px auto;
    				background: greenyellow;
    				/*控制flex*/
    				display: flex;
    				flex-direction: row;
    				justify-content: flex-start;
    				align-items: flex-start;
    				flex-wrap: wrap-reverse;
    				align-content: stretch;
    			}
    			
    			#wrap > .item{
    				width: 30px;
    				height: 30px;
    				background: red;
    				text-align: center;
    				line-height: 30px;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="item">a</div>
    			<div class="item">b</div>
    			<div class="item">c</div>
    			<div class="item">d</div>
    		</div>
    	</body>
    </html>

效果如下：  
![在这里插入图片描述][20181222104149769.png]

**7、order定义项目出现的顺序**  
示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			
    			#wrap{
    				width: 200px;
    				height: 200px;
    				border: 1px solid;
    				margin: 100px auto;
    				background: greenyellow;
    				/*控制flex*/
    				display: flex;
    				flex-direction: row;
    				justify-content: flex-start;
    			}
    			
    			#wrap > .item{
    				width: 30px;
    				height: 30px;
    				background: red;
    				text-align: center;
    				line-height: 30px;
    			}
    			
    			#wrap > .item:nth-child(4){
    				order: 1;
    			}
    			#wrap > .item:nth-child(1){
    				order: 2;
    			}
    			#wrap > .item:nth-child(3){
    				order: 3;
    			}
    			#wrap > .item:nth-child(2){
    				order: 4;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="item">1</div>
    			<div class="item">2</div>
    			<div class="item">3</div>
    			<div class="item">4</div>
    		</div>
    	</body>
    </html>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MDIxMDE_size_16_color_FFFFFF_t_70 5]

**8、flex-basis指定flex元素在主轴方向的初始大小**  
如果不设置flex-basis，flex容器中的项目默认在主轴上按项目原来的大小，可以通过设置flex-basis强制改变项目在主轴上的长度。  
示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			
    			#wrap{
    				width: 200px;
    				height: 200px;
    				border: 1px solid;
    				margin: 100px auto;
    				background: greenyellow;
    				/*控制flex*/
    				display: flex;
    				flex-direction: row;
    				justify-content: flex-start;
    			}
    			
    			#wrap > .item{
    				width: 30px;
    				height: 30px;
    				background: red;
    				text-align: center;
    				line-height: 30px;
    				border:1px solid;
    				/*flex-grow: 1;*/
    				flex-basis: 20px;
    			}
    			
    			#wrap > .item:nth-child(1){
    				flex-basis: 100px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="item">1</div>
    			<div class="item">2</div>
    			<div class="item">3</div>
    			<div class="item">4</div>
    		</div>
    	</body>
    </html>

如不设置flex-basis，容器长度为200px，每个项目在主轴上的长度为30px，则主轴方向上剩余长度为80px，现在只对第一个项目设置了flex-basis: 100px，则第一个项目长度变为100px，其余3个保持原来长度30px，最后主轴上剩余长度变为10px。如果设置flex-basis足够大，会挤压后边的项目只显示出内容长度。  
效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MDIxMDE_size_16_color_FFFFFF_t_70 6]

**9、flex-shrink设置每个项目收缩大小**  
当项目长度超出容器长度时，可以通过设置flex-shrink，使每个项目相应的缩小。flex-shrink用来设置主轴上收缩大小。  
示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			
    			#wrap{
    				width: 100px;
    				height: 200px;
    				/*border: 1px solid;*/
    				margin: 100px auto;
    				background: greenyellow;
    				/*控制flex*/
    				display: flex;
    				flex-direction: row;
    				justify-content: flex-start;
    			}
    			
    			#wrap > .item{
    				width: 50px;
    				height: 50px;
    				background: red;
    				text-align: center;
    				line-height: 30px;
    				/*flex-grow: 1;*/
    				flex-shrink: 1;
    			}
    			
    			#wrap > .item:nth-child(1){
    				flex-shrink: 2;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="item" style="background: yellow;">1</div>
    			<div class="item" style="background: cyan;">2</div>
    			<div class="item" style="background: gray;">3</div>
    			<div class="item">4</div>
    		</div>
    	</body>
    </html>

容器在主轴方向长100px，容器中每个项目长50px，如果不设置flex-shrink，则容器中的项目会被均等压缩的。通过设置flex-shrink可以人为的设置每个项目压缩的大小。示例中，第一个项目设置压缩因子为2，其余3个项目压缩因子为1，4个项目总长度为200px，超出容器100px，所以应当把项目的总长度压缩掉100px，那么第一个项目应该压缩掉100*2/5=40px，其它三个项目应该压缩掉100*1/5=20px，那么原来的项目剩余长度为：第一个项目剩余50-40=10px，其它三个项目剩余50-20=30px。  
效果如下：  
![在这里插入图片描述][2018122216102787.PNG]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MDIxMDE_size_16_color_FFFFFF_t_70]: /images/20220404/e4b94e3c9a74484bad9bac80a03c0543.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MDIxMDE_size_16_color_FFFFFF_t_70 1]: /images/20220404/0bc3ed75fabf4f298fd73df5913157ec.png
[20181217223511101.png]: /images/20220404/9fb6bf9911a94d5bab3c2ca6ca806e6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MDIxMDE_size_16_color_FFFFFF_t_70 2]: /images/20220404/3a7365b26ba54a0cb6164532c4e0ee80.png
[20181217225652475.png]: /images/20220404/4b6dff479ca5424eb64966bcf09f77da.png
[20181219201538837.png]: /images/20220404/034a350c986b4bc881c66f96b2455929.png
[20181219202837433.png]: /images/20220404/b0bb92eb3c4e44e3aaba31a0ac999b53.png
[20181219205016640.png]: /images/20220404/0df568d70687455daba8d11d6ac1cb53.png
[20181219205555698.png]: /images/20220404/328c466c8c0148cab8f37dfbd5bdc14f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MDIxMDE_size_16_color_FFFFFF_t_70 3]: /images/20220404/fc43d991be3a42f0a77dd54d73cfe718.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MDIxMDE_size_16_color_FFFFFF_t_70 4]: /images/20220404/e9965985eb704699bfce4016fdf3013a.png
[20181222104149769.png]: /images/20220404/b68b08b080d54462a159f1044a01633e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MDIxMDE_size_16_color_FFFFFF_t_70 5]: /images/20220404/a6b3669309af4490a0386a67996337e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MDIxMDE_size_16_color_FFFFFF_t_70 6]: /images/20220404/eefbe14c6fea453f8db5c7a06dbfab20.png
[2018122216102787.PNG]: /images/20220404/aef478d796bb4f778dfaeb2e32b9b9fa.png