十四、flex布局（弹性盒、伸缩盒）

最新推荐文章于 2024-07-21 21:06:06 发布
最新推荐文章于 2024-07-21 21:06:06 发布
阅读量461 收藏
点赞数
分类专栏： WEB基础-CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45602227/article/details/117416695
版权

一、浮动布局和flex布局的发展历史

	
	网页布局主要有两种，一种是浮动布局，另一种是flex布局。
		
	+++ 浮动布局
		
			浮动布局是一种传统的布局解决方案。
			它是基于盒状模型，依赖 display + position + float属性。
			它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
	
	+++ flex布局
		
			2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。
			目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
1.1 浮动布局
>>>>>> 宽高度已知
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            border: 1px solid red;
            width: 500px;
            height: 500px;
            position: absolute;
            margin: auto; /*必须*/
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }
    </style>
    <body>
    <div class="outer"></div>
    </body>
    
   
</html>

在这里插入图片描述

>>>>>> 自适应高度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            border: 1px solid red;
            width: 500px;
            position: absolute;
            left: 50%;/*先平移50%*/
            top: 50%;
          
            /*平移回来元素宽高的一半*/
            transform: translate(-50%,-50%); 
        }
        .inner{
            height: 200px;
        }
    </style>
    <body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    </body>
    
</html>

在这里插入图片描述

1.2 flex布局
>>>>>> 任何元素都可以设置为flex
	/* 块级元素*/
	div{
	  display: -webkit-flex; /* Safari兼容方案 */
	  display: flex;
	}
	/* 行内元素*/
	span{
	 display: inline-flex;
	}

二、flex布局

2.1 flex布局基本概念


	+++ flex布局：

			1）flex布局表示弹性布局，为盒状模型提供最大的灵活性。
						   它是css中一种布局手段，它主要用于代替浮动来完成页面布局。
		
			2）任何一种元素都可以指定为flex布局


	
	
	+++ 弹性容器：
				1) 采用flex布局的容器就是弹性容器。
				2) 弹性容器中默认存在两条轴，即主轴和侧轴。
								a) 主轴：弹性元素的排列方向称为主轴。
		   	 					b) 侧轴：与主轴垂直的方向为侧轴。

			
	+++ 弹性元素：
	 			1) 弹性容器的直接子元素是弹性元素。
				2) 弹性元素也可以设置为弹性容器。
				
				3) 当设置flex布局之后，
				   弹性元素的float、clear、vertical-align属性都将失效。

2.2 flex布局兼容性问题

1）支持flex布局的浏览器

在这里插入图片描述

2）flex布局兼容性
		
		flex布局：
				1.flex布局对于一些老版本的浏览器兼容性不好。
				
				2.如果是移动端用，flex布局和浮动布局，推荐使用flex布局。
				3.如果是PC端，flex布局要考虑老版本的兼容问题。

2.2 实现flex布局

		
	1) 实现flex布局需要先指定一个容器，这样容器内部的元素就可以使用 flex 来进行布局。
	2) 任何一个容器都可以被指定为 flex 布局
	
			.container {
			    display: flex | inline-flex;       //可以有两种取值
			}
1）任何一个容器都可以指定为 Flex 布局
		/** 块元素设置flex布局	*/
		div{
		  display: flex;
		}

		/** 行内元素设也可以置flex布局	*/
		span{
		  display: inline-flex;
		}
2）默认情况下弹性元素在容器中自左向右排列，不换行，溢出不缩放
>>>>>>> 未实现flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

     <style>

         *{
             margin:0px;
             padding:0px;
             list-style: none;
         }

         
         .wrapper{
             width:1000px;
             height:200px;

             background-color: red;
         }


         .wrapper div{
             width:100px;
             height:100px;
             margin-top: 10px;

             background-color: blue;
             text-align: center;
             line-height: 100px;
             font-size: 16px;;
         }

     </style>

</head>
<body>

      <div class="wrapper">
            <div class="b1">1</div>
            <div class="b2">2</div>
            <div class="b3">3</div>
      </div>  


</body>
</html>

在这里插入图片描述

>>>>>>> 实现flex布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

     <style>

         *{
             margin:0px;
             padding:0px;
             list-style: none;
         }

         
         .wrapper{
             width:1000px;
             height:200px;

             background-color: red;

             display: flex;
         }


         .wrapper div{
             width:100px;
             height:100px;
             margin-top: 10px;

             background-color: blue;
             text-align: center;
             line-height: 100px;
             font-size: 16px;;
         }

     </style>

</head>
<body>

      <div class="wrapper">
            <div class="b1">1</div>
            <div class="b2">2</div>
            <div class="b3">3</div>
      </div>  


</body>
</html>

在这里插入图片描述

三、弹性容器属性


	设置容器的属性：
				 display:flex;
	
				 flex-direction:row（默认值） | row-reverse | column |column-reverse
							 			 	设置主轴的方向，即弹性元素排列方向
							  
				 flex-wrap:nowrap（默认值） | wrap | wrap-reverse
							  			 	设置弹性元素在主轴上是否换行
	
				 justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly
										 	设置弹性元素在主轴上的对齐方式
										
				 align-items:stretch（默认值） | center  | flex-end | baseline | flex-start
				 align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly
										 	设置弹性元素在副轴上的对齐方式
3.1 flex-direction 设置主轴的方向，即弹性元素的排列方向
	
			flex-direction: row; 设置主轴的方向，即设置弹性元素的排列方向。
				 
					可选值			
					 	  row   			默认值，设置主轴为水平方向，自左向右	
					 	                    弹性元素在容器中水平排列。(自左向右)
											  												 	  							
					 	  row-reverse 	    设置主轴为水平方向，自右向左
					 	  					弹性元素在容器中水平排列（自右向左）
					 	  										 	 					 				
						  column   	 		设置主轴为垂直方向，自上向下
						  					弹性元素在容器中纵向排列（自上向下）	
											
		
						  column-reverse  	设置主轴为垂直方向，自下向上
						  					弹性元素元素在容器中纵向排列（自下向上）
			
								
			1) 如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。
			2) 默认情况下弹性元素在弹性容器中自左向右水平排列，不换行
1）设置主轴的方向，即弹性元素的排列方向
	.box {
	     flex-direction: row | row-reverse | column | column-reverse;
	 }

在这里插入图片描述

2）案例
>>>>>> row: 默认值，表示沿水平方向，由左到右。
<style>
	div{
		display: flex;
		border: 1px solid #000;
		flex-direction: row;
	}
	p{
		border: 1px solid red;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
		margin-left: 20px;
	}
</style>
<body>
		<div>
			<p>1</p>
			<p>2</p>
			<p>3</p>
		</div>
</body>

在这里插入图片描述

>>>>>> row-reverse ：表示沿水平方向，由右到左
<style>
	div{
		display: flex;
		border: 1px solid #000;
		flex-direction: row-reverse;
	}
	p{
		border: 1px solid red;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
		margin-right: 20px;
	}
</style>
<body>
<div>
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>
</body>

在这里插入图片描述

>>>>>> column：表示垂直方向，由上到下
<style>
	div{
		display: flex;
		border: 1px solid #000;
		flex-direction: column;
	}
	p{
		border: 1px solid red;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
		margin-top: 20px;
		margin-left: 20px;
	}
</style>
<body>
<div>
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>
</body>

在这里插入图片描述

>>>>>> column-reverse:表示垂直方向，由下到上

在这里插入图片描述

3.2 flex-wrap 设置弹性元素在弹性容器中一行无法显示时处理方式
	
			flex-wrap  设置了弹性元素在弹性容器中一行无法显示时处理方式
			
				可选值：
						nowrap 		 	默认值，弹性元素溢出也不自动换行						
						wrap    		换行。第一行在上方。
						wrap-reverse    换行,第一行在下方。
			
			
			 1) flex-wrap属性定义，如果一条轴线排不下，如何换行。			   
			 2) 默认情况下，弹性元素排在一条直线上，不换行。
1）设置弹性元素在弹性容器中一行无法显示时换行方式
			.box{
			 	 flex-wrap: nowrap | wrap | wrap-reverse;
			}

a) nowrap:默认值, 不换行，即当主轴尺寸固定时，当空间不足时，弹性元素的尺寸会随之调整而并不会挤到下一行。

说明：设置的项目的宽度就失效了，强行在一行显示

在这里插入图片描述

b) wrap：弹性元素溢出时，沿着副轴的方向换行。换行，第一行在上方

在这里插入图片描述
c) wrap-reverse：换行，第一行在下方

在这里插入图片描述

3）案例
>>>>>> nowrap ，默认值，不换行
		1.默认情况下，弹性元素在容器中水平排列，不会换行。
		  	如果弹性元素超过弹性容器，不会溢出，而是进行缩放。
		  
		 从下图我们可以看到, 容器为水平主轴, 项目本来是100px的宽度, 
		 但是因为不换行（可以通过调整浏览器宽度）, 
		 导致项目本身发生等比缩小（如果传统浮动会发生类似换行效果）。

<style>
	div{
		display: flex;
		border: 1px solid #000;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	p{
		border: 1px solid red;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
		margin-left: 20px;
	}
</style>
<body>
<div>
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
	<p>5</p>
	<p>6</p>
	<p>7</p>
	<p>8</p>
</div>
</body>

在这里插入图片描述
PS
上面布局我们可以看到, 容器为水平主轴, 项目本来是100px的宽度, 但是因为不换行（可以通过调整浏览器宽度）, 导致项目本身发生等比缩小（如果传统浮动会发生类似换行效果）。

>>>>>> wrap
<style>
	div{
		display: flex;
		border: 1px solid #000;
		flex-direction: row;
		flex-wrap: wrap;
	}
	p{
		border: 1px solid red;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
		margin-left: 20px;
	}
</style>
<body>
<div>
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
	<p>5</p>
	<p>6</p>
	<p>7</p>
	<p>8</p>
</div>
</body>

在这里插入图片描述
PS
上面布局我们可以看到, 因为换行, 当水平方向放不下下一个项目就会发生换行, 类似浮动（第一行在上方）。

>>>>>> wrap-reverse
<style>
	div{
		display: flex;
		border: 1px solid #000;
		flex-direction: row;
		flex-wrap: wrap-reverse;
	}
	p{
		border: 1px solid red;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
		margin-left: 20px;
	}
</style>
<body>
<div>
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
	<p>5</p>
	<p>6</p>
	<p>7</p>
	<p>8</p>
</div>
</body>

在这里插入图片描述
PS
与wrap不同之处在于, 第一行排列在下方。

3）案例2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

     <style>

         *{
             margin:0px;
             padding:0px;
             list-style: none;
         }

         
         .wrapper{
             width:200px;
             height:200px;

             background-color: red;

             display: flex;

            
             /** 默认值，不自动换行*/
             /* flex-wrap: nowrap; */
             /** 元素会沿着副轴方向自动换行*/
             /* flex-wrap: wrap; */
             /** 元素会沿着副轴反方向自动换行*/
             flex-wrap: wrap-reverse;


         }


         .wrapper div{
             width:100px;
             height:100px;
             margin-top: 10px;

             background-color: blue;
             text-align: center;
             line-height: 100px;
             font-size: 16px;;
         }

     </style>

</head>
<body>

      <div class="wrapper">
            <div class="b1">1</div>
            <div class="b2">2</div>
            <div class="b3">3</div>
      </div>  


</body>
</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3.3 flex-flow ：flex-direction 和 flex-wrap 的简写形式
	
	flex-flow: flex-direction flex-wrap
	
				1) flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
				
				2) flex-flow:row nowrap;默认值。
										默认情况下，弹性元素在水平方向自左向右排列，不换行。
3.4 justify-content 设置弹性元素在主轴上的对齐方式

		justify-content 设置弹性元素在主轴上的对齐方式。
	           	 	可选值
			           		 flex-start  默认值，左对齐。
			           		 
			           		 flex-end    右对齐。
			           		 center      居中。
							 space-between	 两端对齐, 弹性元素之间间隔相等。	
							 space-around	 弹性元素之间的间隔相等。所以,弹性元素之间的间隔比弹性元素之间的间隔与边框的间隔大一倍。
1）设置弹性元素在主轴上的对齐方式

flex-start

在这里插入图片描述
flex-end
在这里插入图片描述

flex-center

在这里插入图片描述

space-between
在这里插入图片描述
space-around
在这里插入图片描述

2）案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:500px;
            height:100px;
            background-color: red;;


            display: flex;

            justify-content:flex-start;
            /* justify-content:flex-end; */
            /* justify-content:center; */
            /* justify-content:space-between; */
            /* justify-content:space-around; */

        }

        .inner{
            width:50px;
            height:50px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
        }
    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
    </body>
    
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.5 align-items 、align-content 设置弹性元素在副轴上对齐方式
	
	+++ align-items  设置弹性元素在副轴上对齐方式
		        
		        可选值 
			        align-items: stretch;	 
			         					  默认值, 沿着侧边轴对齐。
			         					  如果副轴方向带大小的为auto，则会拉伸。
										 		
					align-items:flex-start  元素不会拉伸，沿着副轴起边对齐。
					align-items:flex-end    元素不会拉伸，沿着副轴终边对齐
					align-items:center		元素不会拉伸，居中对齐

			1）弹性元素如果没有设置高度，默认情况下会自动填充。
			2）使用每个弹性元素的 align-self 属性可重写 align-items 属性。
			

	
	+++ align-content  设置多行弹性元素在副轴上对齐方式。
		           	  
		           	  1) 可选值 
		           	  			align-content: stretch;      默认值, 沿着侧边轴对齐。
		           	  										 如果副轴方向带大小的为auto，则会拉伸。
		           	  										 
			           		    align-content: flex-start;  元素不会拉伸，与副轴的起边对齐
			           		 	align-content: flex-end;    元素不会拉伸，与副轴的终边对齐
			           			align-content: center;      元素不会拉伸，与副轴的中边对齐
				
				
				            	align-content:space-around; 元素不会拉伸，空白分配到元素的两侧
								align-content:space-between; 元素不会拉伸，空白均匀分配到元素之间

							


	 +++ align-items 、	align-content的区别
	 	 
		 	 相同点：两者都是设置弹性元素在侧轴上的对齐方式。
		 	
		 	 不同点：align-items设置单行弹性元素在侧轴上的对齐方式。
		 	 		align-content设置多行弹性元素在侧轴上的对其方式。
3.4.1 align-items 设置弹性元素在副轴上对齐方式
1）设置弹性元素在侧轴上的对齐方式

在这里插入图片描述

2）未设置高度时，则弹性元素的高度默认填充容器
		align-items: stretch;
						默认值，如果弹性元素设置高度，则会沿着侧轴的起边对齐。
						如果弹性元素未设置高度，则会被拉伸，并沿着起边对齐。
>>>>>> 案例1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:500px;
            height:350px;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            flex-wrap:wrap;
            /* align-content: space-around; */
            /* align-items :stretch	; */
            /* justify-content:center; */
        }

        .inner{
            width:100px;
            /* height:100px; */
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 100px;
            font-size: 16px;
        }
    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
    </div>
    </body>
    
</html>

在这里插入图片描述

>>>>>> 案例2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:500px;
            height:400pt;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            flex-wrap:wrap;
            /* align-content: stretch; */
            align-items: stretch;
            /* justify-content: space-between; */
        }

        .inner{
            width:100px;
            /* height:100px; */
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;

        }


     

    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>
        <div class="inner">6 </div>
        <div class="inner">7 </div>
        <div class="inner">8 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述

3）案例
>>>>>> 单行元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:500px;
            height:100px;
            background-color: red;;


            display: flex;

            align-items: stretch;
            /* align-items: flex-start; */
            /* align-items: flex-end; */
            /* align-items: center; */
            /* align-items:baseline; */

        }

        .inner{
            width:50px;
            height:50px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
        }
    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
    </body>
    
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

>>>>>> 多行元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:500px;
            height:400pt;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            flex-wrap:wrap;
            /* align-content: stretch; */
            align-items: stretch;
            /* justify-content: space-between; */
        }

        .inner{
            width:100px;
            /* height:100px; */
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;

        }


     

    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>
        <div class="inner">6 </div>
        <div class="inner">7 </div>
        <div class="inner">8 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.4.2 align-content 设置多行弹性元素在副轴上的对齐方式
1）align-content只能设置多行弹性元素，否则无效
>>>>>> 弹性元素在盒子中不换行，设置align-content无效
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:500px;
            height:150px;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            /* flex-wrap:wrap; */
            align-content: flex-start;
        }

        .inner{
            width:100px;
            height:100px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
        }
    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述

>>>>>> 弹性元素在盒子中换行，设置align-content才会有效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:500px;
            height:150px;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            flex-wrap:wrap;
            align-content: flex-start;
        }

        .inner{
            width:100px;
            height:100px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
        }
    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述

2）案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:500px;
            height:300px;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            flex-wrap:wrap;
            align-content: flex-start;
        }

        .inner{
            width:100px;
            height:100px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
        }
    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、弹性元素属性

	
	设置弹性元素的属性：
					order:0（默认值） | <integer>
					
					flex-shrink:1（默认值） | <number>
					
					flex-grow:0（默认值） | <number>
					
					flex-basis:auto（默认值） | <length>
					
					flex:none | auto | @flex-grow @flex-shrink @flex-basis
					
					align-self:auto（默认值） | flex-start | flex-end |center | baseline| stretch
4.1 order 设置弹性元素的排列顺序
		
	 order属性设置弹性元素排序的位置，默认值为0，数值越小越靠前
1) order设置弹性元素的排列顺序，数值越小越靠前。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:500px;
            height:300px;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            /* flex-wrap:wrap; */
            align-content: center;
        }

        .inner{
            width:100px;
            height:100px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
        }


        .inner:nth-child(1){
            order:5;
        }

        .inner:nth-child(2){
            order:4;
        }

        .inner:nth-child(3){
            order:3;
        }

        .inner:nth-child(4){
            order:2;
        }

        .inner:nth-child(5){
            order:1;
        }


    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述

2) order默认值为0，数值越小，越靠前。
	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:500px;
            height:300px;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            /* flex-wrap:wrap; */
            align-content: center;
        }

        .inner{
            width:100px;
            height:100px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
        }


        .inner:nth-child(1){
            order:5;
        }

        .inner:nth-child(2){
            order:4;
        }

        /* .inner:nth-child(3){
            order:3;
        } */

        .inner:nth-child(4){
            order:2;
        }

        /* .inner:nth-child(5){
            order:1;
        } */


    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述

4.2 flex-shrink 设置空间不足时，弹性元素在主轴上缩小比例（主轴是水平方向，设置的就是宽度；主轴是垂直，设置的就是高度）
	
	flex-shrink: num;
	
				  1) 设置弹性盒子空间不足时, 弹性元素在主轴上的缩小比例。
				  						
				  						主轴是水平方向，则是设置宽度的缩小比例。
				  						主轴是垂直水平，则是设置高度的缩小比例。		
				  						（以下案例，默认主轴都是水平方向，便于记忆）
		
				  
				  2) 弹性元素的缩小比例按照所有弹性元素设置的来进行统一划分。
				  		
				  3)	
					 flex-shrink: 1; 默认值。
								     当如果空间不足，弹性元素在主轴上的长度将缩小。仅宽度缩小。
				
					 flex-shrink: 0; 不收缩。
								     当空间不足时，弹性元素不会缩小，会溢出。仅宽度缩小。
1）flex-shrink：1，默认值，所以当空间不足时，弹性元素默认在容器中不溢出，宽度会自动等比例缩小（前提：主轴是水平方向）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:400px;
            height:40pt;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            /* flex-wrap:wrap; */
            align-content: center;
        }

        .inner{
            width:100px;
            height:100px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
        }




    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2）flex-shrink：0，即使空间不足，该弹性元素不会缩小。会溢出
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:500px;
            height:300px;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            /* flex-wrap:wrap; */
            align-content: center;
        }

        .inner{
            width:100px;
            height:100px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;

            /** 默认值*/
            flex-shrink: 0;
        }


    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述

2）flex-shrink：3，设置弹性元素的缩小比例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:400px;
            height:40pt;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            /* flex-wrap:wrap; */
            align-content: center;
        }

        .inner{
            width:100px;
            height:100px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
        }

        .inner:nth-child(2){
            flex-shrink: 3;
        }


    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述

4.3 flex-grow 设置空间剩余时，弹性元素在主轴上的放大比例 （主轴是水平方向，设置的就是宽度；主轴是垂直，设置的就是高度）
	
	flex-grow : num;
	
				  1) 设置弹性盒子空间剩余时, 弹性元素的放大比例。
				  						主轴是水平方向，则是设置宽度的放大比例。
				  						主轴是垂直水平，则是设置高度的放大比例。		

						  	                
				  2) 弹性元素的放大比例按照所有弹性元素设置的来进行统一划分。
		
				  2)	
					 flex-grow : 0; 默认值。
								     当如果空间剩余时，弹性元素也不会放大。
				
					 flex-grow: 1; 放大
								     当空间不足时，弹性元素不会缩小，会溢出。仅宽度放大。
1）flex-grow默认值为0，所以当空间剩余时，弹性元素不会放大。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:800px;
            height:40pt;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            /* flex-wrap:wrap; */
            align-content: center;
        }

        .inner{
            width:100px;
            height:100px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
        }

      
     


    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述

2）弹性元素的放大比例按照所有弹性元素设置的来进行统一划分。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:800px;
            height:40pt;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            /* flex-wrap:wrap; */
            align-content: center;
        }

        .inner{
            width:100px;
            height:100px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
        }

        .inner:nth-child(2){
            flex-grow: 2;
        }
     


    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述
在这里插入图片描述

3）flex-grow:3。设置弹性盒子的放大比例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:800px;
            height:40pt;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            /* flex-wrap:wrap; */
            align-content: center;
        }

        .inner{
            width:100px;
            height:100px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
        }

        .inner:nth-child(2){
            flex-grow: 2;
        }
     
        .inner:nth-child(3){
            flex-grow: 3;
        }

    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述

4.4 flex-basis 设置弹性元素在主轴上的长度（主轴是水平方向，设置的就是宽度；主轴是垂直，设置的就是高度）
	  
	 flex-basis: 100px; 
					 
					 1.设置弹性元素在主轴上的长度。（主轴是水平方向，设置的就是宽度；主轴是垂直，设置的就是高度）
					 		 
					 	
					 		  
					 2.
					 	flex-basis：auto;
					 			默认值是auto，表示参考元素自身的宽度和高度。
					  	
					  	flex-basis:100px;
					   			如果设置了该值，即使设置了宽或高，也是以该值为准。
1）flex-basis默认值为auto，则以width为准。（主轴是水平方向，设置的就是宽度；主轴是垂直，设置的就是高度）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:800px;
            height:40pt;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            /* flex-wrap:wrap; */
            align-content: center;
        }

        .inner{
            width:100px;
            height:100px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
            /* flex-basis:300px; */

        }

     

    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述

2）设置了flex-basis:200px，则width失效。（主轴是水平方向，设置的就是宽度；主轴是垂直，设置的就是高度）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:800px;
            height:40pt;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            /* flex-wrap:wrap; */
            align-content: center;
        }

        .inner{
            width:100px;
            height:100px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
            flex-basis:300px;

        }

     

    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述

4.5 align-self 单独设置弹性元素的对其方式
   
    align-self: flex-start | flex-end | center | baseline | stretch 
	
			1）align-self是单独设置弹性元素的对齐方式。
			2）align-self只可以覆盖align-items设置的对齐方式。

								

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width:500px;
            height:200pt;
            background-color: red;;
            margin-top:200px;

            display: flex;

            
            flex-wrap:wrap;
            /* justify-content: space-between; */
        }

        .inner{
            width:100px;
            height:50px;
            background-color: blue;
            border:1px solid black;
            text-align: center;
            line-height: 50px;
            font-size: 16px;

        }

        .inner:nth-child(2){
            align-self: flex-end;
        }


     

    </style>
    <body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3 </div>
        <div class="inner">4 </div>
        <div class="inner">5 </div>
        <div class="inner">6 </div>
        <div class="inner">7 </div>
        <div class="inner">8 </div>

    </div>
    </body>
    
</html>

在这里插入图片描述

4.6 flex可以设置所有元素的三个属性
	
	 flex可以设置所有元素的三个属性。
					flex：增长  缩减  基础;
			
			
			flex:1 1 auto;
			
			flex: inherit; 默认值，相当于  flex：0,1,auto; 只能减
			flex: auto;	   相当于  flex：1,1,auto; 可增可减
			flex: none;	   相当于  flex：0,0,auto; 不增不减 。表示弹性元素没有弹性，不会缩放，也会渐。
1.2 天猫弹性盒（自适应案例）
		天猫弹性盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        *{
            margin:0px ;
            padding:0px;
            list-style: none;

            font-size: 13px;;
        }

        .nav{
            width:100%;
            /* background-color: red;; */
        }
       

        /** 设置每一行的容器*/
        .nav-inner{
            display: flex; 
            justify-content:space-around;
        }

        .item{
            width:10%;
            /* flex:auto; */
            text-align: center;
        }

        

        .item img{
            /** 设置图片宽度和父元素宽度一致*/
            width:100%;
        }

       

    </style>
</head>
<body>

    <div class="nav">
        
            <div class="nav-inner">          
                <div class="item">
                    <a>
                        <img  src="1.png">
                        <span>天猫</span>
                    </a>
                </div>
                <div class="item">
                    <a>
                        <img  src="2.png">
                        <span>聚划算</span>
                    </a>
                </div>
                <div class="item">
                    <a>
                        <img  src="3.png">
                        <span>天猫国际</span>
                    </a>
                </div>
                <div class="item">
                    <a>
                        <img  src="4.png">
                        <span>外贸</span>
                    </a>
                </div>
                <div class="item">
                    <a>
                        <img  src="5.png">
                        <span>飞猪</span>
                    </a>
                </div>
               
            </div>

            <div class="nav-inner">          
                <div class="item">
                    <a>
                        <img  src="1.png">
                        <span>天猫</span>
                    </a>
                </div>
                <div class="item">
                    <a>
                        <img  src="2.png">
                        <span>聚划算</span>
                    </a>
                </div>
                <div class="item">
                    <a>
                        <img  src="3.png">
                        <span>天猫国际</span>
                    </a>
                </div>
                <div class="item">
                    <a>
                        <img  src="4.png">
                        <span>外贸</span>
                    </a>
                </div>
                <div class="item">
                    <a>
                        <img  src="5.png">
                        <span>飞猪</span>
                    </a>
                </div>
               
            </div>


    </div>
    
</body>
</html>

在这里插入图片描述

二旬、
关注
专栏目录
Flex弹性布局
m0_74284133的博客
05-11 1228
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
html 伸缩盒子布局,详解CSS3伸缩布局盒模型Flex布局
weixin_42127937的博客
06-17 2028
一、Flex 布局是什么？CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局(Flexible Box)模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。CSS3引入的布局模式Flex布局，主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ，以最佳的方式填充可用空间。Flex容器会使子项目...
Flex弹性盒子布局详解
柯晓楠
03-12 848
1、什么是 flex 布局 Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"。 2、基本概念 2.1、什么是 flex 容器（flex container）？ 采用 flex 布局的元素，称为 flex 容器： .box { display: flex | inline-flex; } 2.2、什么...
flex弹性布局(详解)
最新发布
msq6678的博客
07-21 5081
Flex弹性盒布局前言布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009 年，W3C 提出了一种新的方案—— Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。一、什么是Flex弹性布局？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的。
flex布局
weixin_44796147的博客
11-26 347
// 感觉很有用的布局~ 传统布局的局限性 传统布局基于盒模型，依赖display+position+float属性，对于类似垂直居中的布局就不容易实现 flex布局是什么 意为弹性布局，任何容器都可以指定为flex布局。 //块状元素 div{ display: flex; } //行内元素 span{ display: inline-flex; } 要注意的是，设置为flex布局后，子元...
前端：flex布局兼容性问题
chouchilei5210的博客
11-30 516
一.W3C各个版本的flex 2009 version 标志：display: box; or a property that is box-{*} (eg. box-pack) 2011 version 标志：display: flexbox; or the flex() fu...
Flex 弹性盒子布局
顾久``的博客
10-21 740
采用flex布局的元素，称为flex容器（flex container），简称“容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。容器默认存在两根轴：水平的主轴和垂直的交叉轴。
Flex布局-05-使用flex属性修改弹性盒子伸缩比
Echo
01-22 224
1、盒子代码准备： 未修改情况： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS3 弹性盒布局（伸缩布局,flex布局）
weixin_58139900的博客
10-12 1156
概述 浏览器内置的，实现多行多列布局，但是 最适用于一行多列布局 Flex布局主要思想是提供一个更加有效的方式制定、调整和分布一个容器里的项目布局。 使容器有能力改变项目的大小、排列方向、对齐等，以最佳方式填充可用空间（因此可以适应设备屏幕大小的变化） ...
CSS弹性盒模型flex在布局中的应用详解
09-24
- **flex-grow**、**flex-shrink**和**flex-basis**：这三个属性定义了伸缩项目的弹性伸缩比例，用于决定在容器空间不足或有剩余时如何分配空间。 - **order**：允许更改伸缩项目的排列顺序，数值越小，项目越靠前。...
flex布局兼容性问题小结
01-21
一.W3C各个版本的flex 2009 version 标志：display: box; or a property that is box-{*} (eg. box-pack) 2011 version 标志：display: flexbox; or the flex() function or flex-pack property 2012 version 标志：display: flex/inline-flex; and flex-{*} properties 2014 version 新增了对flex项z-index的规定 2015 W3C Editor’s Draft 没有大的改动
flex弹性盒子布局
weixin_45249263的博客
02-13 1万+
flex是flexible box 的缩写，即为“弹性布局”，用来为盒子模型提供最大的灵活性，任何容器都可以指定为flex布局；
弹性盒-flex布局
weixin_45085122的博客
11-13 242
flex布局学习笔记
flex布局（弹性盒子布局，盒子布局）
wenmin1987的博客
11-21 823
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool) 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 1.解决传统border带来影响   一行显示4个div块，两端贴着边框...
flex弹性布局（详解）
热门推荐
wshwsh_的博客
08-09 1万+
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
flex 平铺布局_最详细完整的flex弹性布局
weixin_39965881的博客
12-19 2193
初了解在学习弹性布局之前首先就要明白其概念flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性任何一个容器都可以指定为flex布局.box{display: flex;}行内元素当然也可以使用flex布局.box{display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{display: -webkit-fl...
关于flex布局中的兼容性问题
ddr66288的博客
01-18 404
　　这几天在做项目中用到了flex布局，但是在测试的过程中发现他的兼容性实在是太差了，仅仅用到水平和垂直居中的样式，没想到兼容性代码就写了好几行。 　　display：flex; display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display...
浮动与flex布局
ja_ck1873030的博客
05-15 414
如图：one盒子脱离了原来的标准流，所以一个盒子中的块元素都要设置float属性。标准流也叫文档流，指的是标签在页面中默认的排布规则，例如:块元素独占一行，行内。b.解释:伪元素添加的行内，要求块，要加display:block转头块元素。设置方式：给父元素设置display：flex，子元素可以自动挤压或拉伸。a.影响: 如果子元素浮动了，此时子元素不能撑开标准流的块级父元素。1.操作:在父元素内容的最后添加一个块级元素，给添加的块级元素设。浮动的盒子会脱离标准流，不再占用标准流的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值