css弹性布局（display:flex）

最新推荐文章于 2024-09-14 13:04:57 发布
最新推荐文章于 2024-09-14 13:04:57 发布
阅读量645 收藏 6
点赞数 2
分类专栏： css3 文章标签： flex css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wll_web/article/details/103628388
版权

css弹性布局（display:flex）

display:flex相关属性：

容器属性：
	1.flex-direction:控制主轴是哪一根，控制主轴的方向。
		属性值：
			row:				主轴是从左往右的x轴.
		   	row-reverse:		主轴是从右往左的x轴.
		   	column:				主轴是从上往下的y轴.
		   	column-reverse:		主轴是从下往上的y轴.
		   	
	2.富裕空间管理：只决定富裕空间的位置，不会给项目分配空间。
		（1）justify-content:管理主轴富裕空间。
				属性值：
					flex-start:			富裕空间在主轴的正方向.
					flex-end:			富裕空间在主轴的反方向.
					center:				富裕空间在主轴两边.
					space-between:		富裕空间在每个项目之间.
					space-around: 	  	富裕空间在项目两边和项目之间.
		（2）align-items:管理侧轴富裕空间。
				属性值：
					flex-start:			富裕空间在侧轴的正方向.
					flex-end:			富裕空间在侧轴的反方向.
					center:				富裕空间在侧轴两边.
					baseline:			项目基线对齐.
					stretch:			等高布局（项目没有高度）.
					
	3.flex-wrap:控制的是侧轴的方向（项目总长度大于容器长度的时候，项目的宽度会自行收缩不换行，flex-wrap可以设置他进行换行以及侧轴方向）。
		属性值：
			nowrap:			不换行.
			wrap:			侧轴方向由上而下（flex-shrink失效）.
			wrap-reverse:	侧轴方向由下而上（flex-shrink失效）.
		侧轴富裕空间的管理：
			单行单列（不换行）时：
					align-content无效.
			多行多列（换行）时：
					align-items无效.
		注意：align-self 优先级高最高。
			
	4.align-content:多行/列时侧轴富裕空间的管理（把多行/列看成一个整体）。
		属性值：
			flex-start:			富裕空间在侧轴的正方向.
			flex-end:			富裕空间在主侧轴的反方向.
			center:				富裕空间在侧轴两边.
			space-between:		富裕空间在每个项目之间.
			space-around: 	  	富裕空间在项目两边和项目之间.
			注意：要设置flex-wrap换行（属性值不为nowrap），align-content的效果才会生效。
			
	5.flex-flow:flex-direction和flex-wrap的简写属性（本质上控制了主轴和侧轴分别是哪一根，以及它们的方向）。
		属性值：
			参数1（flex-direction）：
				row:				主轴是从左往右的x轴.
		   		row-reverse:		主轴是从右往左的x轴.
		   		column:				主轴是从上往下的y轴.
		   		column-reverse:		主轴是从下往上的y轴.
			参数2（flex-wrap）：
				nowrap:			不换行.
				wrap:			侧轴方向由上而下（flex-shrink失效）.
				wrap-reverse:	侧轴方向由下而上（flex-shrink失效）.

项目属性：
	1.order:控制项目的排列顺序（默认值为0）。
		属性值：number.
		注意：如果几个项目的order值相等，则根据元素先后顺序依次排列。
		
	2.align-self:项目自身侧轴富裕空间的管理。
		属性值：
			flex-start:			富裕空间在侧轴的正方向.
			flex-end:			富裕空间在侧轴的反方向.
			center:				富裕空间在侧轴两边.
			baseline:			项目与容器基线对齐.
			stretch:			项目与容器等高布局（项目没有高度）.
			
	3.flex-basis:伸缩规则计算的基准值（默认值auto，拿width或height的值）。
	
	4.flex-grow:弹性空间管理（弹性因子，默认值为0）。
		属性值：number.
		注意：容器大小大于项目大小总和时该属性才生效。
		计算规则：
			（1）可用空间 = （容器大小 - 所有相邻项目flex-basis的总和）。
				var a = 容器大小 - flex-basis和.
			（2）可扩展空间 = （可用空间 / 所有相邻项目flex-grow的总和）。
				var b = a / flex-grow和.
			（3）每项扩展空间的计算 = （可扩展空间 * 每项flex-grow值）。
				var c = b * flex-grow.
			（4）每项伸缩后大小 = （伸缩基准值flex-basis + 每项扩展空间）。
				var d = flex-basis + c.
				
	5.flex-shrink:收缩因子（默认值为1）。
		属性值：number.
		注意：容器大小小于项目大小总和时该属性才生效，并且元素不能换行，否则没有效果。
		计算规则：
			（1）计算收缩因子与基准值乘的总和：
				var a = 每一项flex-shrink * flex-basis之和.
			（2）计算收缩因数：收缩因数 =（项目的收缩因子 * 项目基准值）/ 第一步计算总和：
				var b = (flex-shrink * flex-basis)/a.
			（3）每项移除空间的计算：移除空间 = 项目收缩因数 x 溢出的空间（容器大小-项目大小总和） 
				var c =	b * 溢出的空间.
			（4）每项伸缩后大小的计算：每项伸缩后大小 = 项目大小 - 移除空间。
				var d = flex-basis - c.
	6.flex:简写属性。
		flex属性是flex-grow,flex-shrink,flex-basis的简写，对应的默认值分别为0,1,auto。

演示模板HTML代码：

   <div id="box">
	<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>

css代码：

   *{
     margin:0;
	 padding:0;
   }
   #box{
     width:400px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
   }
   .inner{
     width:50px;
	 height:50px;
	 background:pink;
	 text-align:center;
	 line-height:50px;
   }

页面效果：
在这里插入图片描述

容器属性

1.flex-direction：控制主轴是哪一根，控制主轴的方向

flex-direction:row

   #box{
     width:400px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:row
   }

页面效果：
flex-direction:row
flex-direction:row-reverse
页面效果：
flex-direction:row-reverse
flex-direction:column
页面效果：
flex-direction:column
flex-direction:column-reverse
页面效果：
flex-direction:column-reverse

2.justify-content：管理主轴富裕空间

justify-content:flex-start

   #box{
     width:400px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:row;
	 justify-content:flex-start
   }

页面效果：
justify-content:flex-start

justify-content:flex-end
页面效果：
justify-content:flex-end
justify-content:center
页面效果：
justify-content:center
justify-content:space-between
页面效果：
justify-content:space-between
justify-content:space-around
页面效果：
justify-content:space-around

3.align-items:管理侧轴富裕空间

align-items:flex-start

   #box{
     width:400px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:row;
	 justify-content:flex-start;
	 align-items:flex-start
   }

页面效果：
align-items:flex-start
align-items:flex-end
页面效果：
align-items:flex-end
align-items:center
页面效果：
align-items:center
align-items:baseline

   #box{
     width:400px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:row;
	 justify-content:flex-start;
	 align-items:baseline
   }
   #box > .inner:nth-child(2){
     line-height:100px
   }

页面效果：
align-items:baseline
align-items:stretch

   #box{
     width:400px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:row;
	 justify-content:flex-start;
	 align-items:stretch
   }
/*    #box > .inner:nth-child(2){
     line-height:100px
   } */
   .inner{
     width:50px;
	 /* height:50px; */
	 background:pink;
	 text-align:center;
	 line-height:50px;
   }

页面效果：
align-item:stretch
提醒：只要能准确分辨主轴，侧轴和它们的方向，就能更快的设置富裕空间的位置。

4.flex-wrap:控制的是侧轴的方向

   #box{
     width:100px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:row;
	 justify-content:flex-start;
	 align-items:flex-start
   }
   .inner{
     width:50px;
	 height:50px;
	 background:pink;
	 text-align:center;
	 line-height:50px;
   }

当我们把容器的宽度调成100px（小于项目的总宽度）的时候。
页面效果：
在这里插入图片描述
每个项目的宽度会自动收缩。
设置flex-wrap:nowrap的效果跟着一样。

flex-wrap:wrap

   #box{
     width:100px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:row;
	 justify-content:flex-start;
	 align-items:flex-start;
	 flex-wrap:wrap
   }

页面效果：
flex-wrap:wrap
flex-wrap:wrap-reverse
页面效果：
flex-wrap:wrap-reverse

5.align-content:多行/列时侧轴富裕空间的管理（把多行/列看成一个整体）

注意：要设置flex-wrap换行（属性值不为nowrap），align-content的效果才会生效。
属性值更justify-content的属性值一样。

align-content:flex-start

   #box{
     width:100px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:row;
	 justify-content:flex-start;
	 align-items:flex-start;
	 flex-wrap:wrap;
	 align-content:flex-start
   }
   .inner{
     width:50px;
	 height:50px;
	 background:pink;
	 text-align:center;
	 line-height:50px;
   }

页面效果：
align-content:flex-start
align-content:flex-end
页面效果：
align-content:flex-end
align-content:center
页面效果：
align-content:center
align-content:space-between
页面效果：
align-content:space-between
align-content:space-around
页面效果：
align-content:space-around

6.flex-flow:flex-direction和flex-wrap的简写属性（本质上控制了主轴和侧轴分别是哪一根，以及它们的方向）

flex-flow一共两个参数，参数1代表flex-direction，参数2代表flex-wrap，只写一个代表只设置主轴。

   #box{
     width:100px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:row;
	 justify-content:flex-start;
	 align-items:flex-start;
	 flex-wrap:wrap;
	 align-content:space-around
   }

这段样式的效果是：
在这里插入图片描述
我们用flex-flow设置一下：

   #box{
     width:100px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 /* flex-direction:row; */
	 justify-content:flex-start;
	 align-items:flex-start;
	 /* flex-wrap:wrap; */
	 align-content:space-around;
	 flex-flow:row wrap
   }

页面效果：
在这里插入图片描述
可以看见效果跟刚才是一样的。

我们把flex-flow:row wrap第二个参数改成wrap-reverse看看：
在这里插入图片描述
可以看见现在侧轴的方向是从下到上了。

项目属性

1.order:控制项目的排列顺序（默认值为0）

注意：如果几个项目的order值相等，则根据元素先后顺序依次排列。

   #box{
     width:400px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
   }
   .inner{
     width:50px;
	 height:50px;
	 background:pink;
	 text-align:center;
	 line-height:50px;
	 order:1;
   }

页面效果：
在这里插入图片描述
因为现在每个项目的order都是1，排列顺序是按照元素的先后顺序来的，如果改成这样：

   #box > .inner:nth-child(1){
     order:2;
   }
   #box > .inner:nth-child(2){
     order:5;
   }
   #box > .inner:nth-child(3){
     order:1;
   }
   #box > .inner:nth-child(4){
     order:3;
   }
   #box > .inner:nth-child(5){
     order:4;
   }

页面效果：
在这里插入图片描述
可以看见这次项目的排列顺序是根据order的值来进行排列的。

2.align-self:项目自身侧轴富裕空间的管理

justify-content、align-items、align-content都是对所有项目进行富裕空间管理的，而align-self可以对自身进行富裕空间管理，下面让我们一起来看一下。

align-self:flex-start

   #box{
     width:400px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:row;
	 justify-content:center;
	 align-items:center;
   }
   .inner{
     width:50px;
	 height:50px;
	 background:pink;
	 text-align:center;
	 line-height:50px;
   }
   #box > .inner:nth-child(2){
     align-self:flex-start
   }

页面效果：
align-self:flex-start
align-self:flex-end
页面效果：
align-self:flex-end
align-self:center
页面效果：
align-self:center
align-self:baseline
页面效果：
align-self:baseline
align-self:stretch
去掉项目的高度才有效果。

   .inner{
     width:50px;
	 /* height:50px; */
	 background:pink;
	 text-align:center;
	 line-height:50px;
   }

页面效果：
align-self:stretch

3.flex-basis:伸缩规则计算的基准值（默认值auto，拿width或height的值）

flex-basis可以设置项目自身的大小（以主轴为准）。

   #box{
     width:400px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:row;
	 justify-content:center;
	 align-items:center;
   }
   .inner{
     width:50px;
	 height:50px;
	 background:pink;
	 text-align:center;
	 line-height:50px;
   }
   #box > .inner:nth-child(2){
     flex-basis:100px
   }

页面效果：
flex-basis:100px
可以看见只有2号项目设置了flex-basis，宽度变成了100，我们把主轴变成y轴试试：

   #box{
     width:400px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:column;
	 justify-content:center;
	 align-items:center;
   }

页面效果：
在这里插入图片描述

4.flex-grow:弹性空间管理（弹性因子，默认值为0）

注意：容器大小大于项目大小总和时该属性才生效。
没设置flex-grow之前：

   #box{
     width:400px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:row;
	 justify-content:flex-start;
	 align-items:flex-start;
   }
   .inner{
     width:50px;
	 height:50px;
	 background:pink;
	 text-align:center;
	 line-height:50px;
   }

页面效果：
在这里插入图片描述
设置flex-grow:1

   .inner{
     width:50px;
	 height:50px;
	 background:pink;
	 text-align:center;
	 line-height:50px;
	 flex-grow:1
   }

页面效果：
flex-grow
可以看见每个项目的宽度都变成了80px，根据开头的计算规则我们可以算出最后的结果：

（1）可用空间 = （容器大小 - 所有相邻项目flex-basis的总和）。
		150 = 400 - 50*5.
（2）可扩展空间 = （可用空间 / 所有相邻项目flex-grow的总和）。
		30 = 150 / 5.
（3）每项扩展空间的计算 = （可扩展空间 * 每项flex-grow值）。
		30 = 30 * 1.
（4）每项伸缩后大小 = （伸缩基准值flex-basis + 每项扩展空间）。
		80 = 50 + 30.

这个比较简单，我们把2号项目的flex-basis设置成100px，3号项目的flex-grow设置为3，再来计算一下看看是否正确：

   #box{
     width:400px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:row;
	 justify-content:flex-start;
	 align-items:flex-start;
   }
   .inner{
     width:50px;
	 height:50px;
	 background:pink;
	 text-align:center;
	 line-height:50px;
	 flex-grow:1
   }
   #box > .inner:nth-child(2){
   	 flex-basis:100px;
   }
   #box > .inner:nth-child(3){
   	 flex-grow:3;
   }

首先我们可以知道1、4、5项目的大小一样，2号项目是一个大小，3号项目又是另一个大小：

（1）可用空间 = （容器大小 - 所有相邻项目flex-basis的总和）。
		100 = 400 - 100 + 50*4.
（2）可扩展空间 = （可用空间 / 所有相邻项目flex-grow的总和）。
		可扩展空间 = 100 / 7（1,2,4,5的flex-grow为1,3的flex-grow为3,相加为7）
（3）每项扩展空间的计算 = （可扩展空间 * 每项flex-grow值）。
		1,4,5项目 = (100 / 7) * 1
		2项目 = (100 / 7) * 1
		3项目 = (100 / 7) * 3
（4）每项伸缩后大小 = （伸缩基准值flex-basis + 每项扩展空间）。
		1,4,5项目 = 50 + (100 / 7) * 1		四舍五入为：64.28
		2项目 = 100 + (100 / 7) * 1			四舍五入为：114.28
		3项目 = 50 + (100 / 7) * 3			四舍五入为：92.86

我们来看下效果是不是这样：
在这里插入图片描述
可以看见计算出来的结果都是对的。

5.flex-shrink:收缩因子（默认值为1）

注意：容器大小小于项目大小总和时该属性才生效，并且元素不能换行，否则没有效果。

   #box{
     width:200px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:row;
	 justify-content:flex-start;
	 align-items:flex-start;
   }
   .inner{
     width:50px;
	 height:50px;
	 background:pink;
	 text-align:center;
	 line-height:50px;
	 flex-shrink:1
   }

页面效果：
flex-shrink
可以看见每个项目的宽度由原来的50px变成了40px，根据开头的计算规则我们可以算出最后的结果：

（1）计算收缩因子与基准值乘的总和：
		250 = 1 * 50 * 5
（2）计算收缩因数：收缩因数 =（项目的收缩因子 * 项目基准值）/ 第一步计算总和：
		0.2 = 1 * 50 / 250
（3）每项移除空间的计算：移除空间 = 项目收缩因数 x 溢出的空间（项目大小总和 - 容器大小） 
		10 = 0.2 * (50 * 5 - 200)
（4）每项伸缩后大小的计算：每项伸缩后大小 = 项目大小 - 移除空间。
		40 = 50 - 10

这个比较简单，我们把2号项目的flex-basis设置成100px，3号项目的flex-shrink设置为3，再来计算一下看看是否正确：

   #box{
     width:200px;
	 height:300px;
	 border:1px solid;
	 margin:100px auto;
	 display:flex;
	 flex-direction:row;
	 justify-content:flex-start;
	 align-items:flex-start;
   }
   .inner{
     width:50px;
	 height:50px;
	 background:pink;
	 text-align:center;
	 line-height:50px;
	 flex-shrink:1
   }
   #box > .inner:nth-child(2){
   	 flex-basis:100px;
   }
   #box > .inner:nth-child(3){
   	 flex-shrink:3;
   }

首先我们可以知道1、4、5项目的大小一样，2号项目是一个大小，3号项目又是另一个大小：

（1）计算收缩因子与基准值乘的总和：
		400 = (1 * 50 * 3) + (1 * 100 * 1) + (3 * 50 * 1)
（2）计算收缩因数：收缩因数 =（项目的收缩因子 * 项目基准值）/ 第一步计算总和：
		1,4,5项目 0.125 = 1 * 50 / 400
		2项目     0.25 = 1 * 100 / 400
		3项目     0.375 = 3 * 50 / 400
（3）每项移除空间的计算：移除空间 = 项目收缩因数 x 溢出的空间（项目大小总和 - 容器大小） 
		1,4,5项目 12.5 = 0.125 * ((50 * 4 + 100) - 200)
		2项目     25 = 0.25 * ((50 * 4 + 100) - 200)
		3项目     37.5 = 0.375 * ((50 * 4 + 100) - 200)
（4）每项伸缩后大小的计算：每项伸缩后大小 = 项目大小 - 移除空间。
		1,4,5项目 50 - 12.5 = 37.5
		2项目     100 - 25 = 75
		3项目     50 - 37.5 = 12.5

我们来看下效果是不是这样：
flex-shrink
可以看见计算出来的结果都是对的。

6.flex:简写属性

flex属性是flex-grow，flex-shrink，flex-basis的简写，对应的默认值分别为0,1,auto，通常用于等比例布局。

css代码：

	#box{
	  width:400px;
	  height:300px;
	  border:1px solid;
	  margin:100px auto;
	  display:flex;
	}
	#box > .inner{
	  height:50px;
	  background:red;
	  font:20px/50px '微软雅黑';
	  text-align:center;
	  flex:1;
	}

HTML代码：

  <div id="box">
	<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>

页面效果：
flex简写
可以看见在未设置项目宽度的情况下，flex属性能实现项目的等比例布局，我们打开浏览器的调试模式看下。
在这里插入图片描述
可以看见只flex只设置一个参数的情况下，后面两个参数采用的是默认值（因为没有宽度所有项目的基准值flex-basis为0）。

wll_blogs
关注
专栏目录
Web前端基础——弹性布局display:flex
weixin_56182955的博客
04-03 877
display：元素显示的方式 display的取值： display:none 不生成盒子 display:inline 行盒 多个行盒 标签可在一行显示 display:block 块盒 块盒元素独占一行 display:其他 例如：flex Flex 容器：父元素 项目：子元素 主轴：X轴（默认） 交叉轴：y轴（默认） display不具有继承性 display：flex； 添加flex的标签就是容器，子元素就是项目 功能： 1.所有的项目默认情况在
微信小程序CSS布局—display:flex
Danown的博客
10-13 4167
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 flex的六种属性 flex-direction 容器内元素的排列方向(默认横向排列) flex-direction:row 沿水平主轴让元素从左向右排列 flex-direction:column 让元素沿垂直主轴从上到下垂直排列 flex-direction:row-reverse 沿水平主轴让元素从右.
display: flex弹性布局
10-12
display: flex弹性布局
css display：flex详解
热门推荐
weixin_42836226的博客
10-29 2万+
页面布局的时候经常需要给块级子元素居中，目前发现最方便直接的是父级元素使用display：flex属性， css display:flex 属性 6 2018.09.04 16:03:53 字数 902 阅读 151492 一：display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实...
CSS——弹性盒子布局（display: flex）
最新发布
懒羊羊大王的博客
09-14 2314
Flexbox或者是弹性布局，它的全称叫做弹性盒子布局，那么它到底该如何实现呢？从我们熟悉的 display 属性开始。给元素添加 display: flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）。那么我们该如何具体地操作使用呢？下面我们来进行细致深入的学习。
Flex 布局
qq_35904166的博客
12-21 174
一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀。 ...
Flex 弹性盒子布局(容器、项目)
Dwyane、的博客
06-15 867
一：简介 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 二：容器的属性 1.flex-direction 属性决定主轴的方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端。 .
CSS中的display: flex；
2301_77523055的博客
04-22 691
是CSS（层叠样式表）中用于设置容器为弹性盒子模型（Flexbox）的属性值。弹性盒子模型是CSS3中引入的一个新的布局模式，它设计用来更好地在容器中布局、对齐和分配空间给子元素（即容器内的项目），即使容器的大小是动态变化的或者未知的。使用Flexbox，你可以轻松地控制子元素的对齐方式（水平或垂直）、排列顺序、空间分配等，而无需使用浮动或定位等传统方法，这大大简化了复杂的布局任务。时，这个元素会变成一个弹性容器，而它的直接子元素则自动成为弹性项目（flex items）。
CSS：弹性布局（display:flex）
避免专业名词，喜欢讲人话。
07-18 740
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
css弹性布局 display：flex
weixin_43915401的博客
02-20 241
flex是flexible box的缩写，意味弹性布局 设为flex布局后，子元素的float、clear和vertical-align属性将消失 1、flext-direction：row / column / row-reverse row 沿水平主轴让元素从左到右排列 column 沿垂直主轴从上到下排列 row-reverse 沿水平主轴从右到左排列 2、flex-wrap：nowrap / wrap nowrap 默认元素不换行，自动减少宽度 wrap 元素换行 3、justify-content
详解CSS中的display:flex||inline-flex属性|56375.pdf
12-12
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex示例代码 ...
flex 布局
bangongzan0053的博客
05-03 258
flex入门 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 容器的属性 flex-direction row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向...
Flex布局
u010653873的博客
12-27 353
Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 .box{ display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/ display: flex; //将对象作为弹性伸缩盒显示 } 当然，行内元素也可以使用Flex布局。.box { displ
CSS弹性布局
weixin_45203607的博客
04-30 8210
title: CSS弹性布局 abbrlink: 31146 date: 2020-07-22 13:09:38 author: 胡安民 toc: true top: false cover: false summary: categories: Web reprintPolicy: cc_by keywords: 弹性布局概念,flex-direction,flex-wrap, justify-content,align-items,align-content tags: CSS CSS-弹性布局.
CSS布局(display:flex)
qq_44915190的博客
09-02 1123
CSS布局(display:flex)
CSS的display:flex说明
白袍小将的博客
08-11 1万+
在进行网页前端设计时，需要垂直居中显示文本，但CCS似乎没有明确的垂直居中的代码方法，由于目前的页面不再考虑以前的浏览器了，因此采用CSS3的display:flex方法来实现。现记录一下flex属性的相关资料。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，W3C提出了
CSS: 弹性布局display:flex
weixin_42204713的博客
11-11 536
文章目录弹性布局dislay:flex主轴的方向flex-direction主轴的内容分布justify-content侧轴的内容分布align-items换行flex-wrap弹性布局综合案例 弹性布局dislay:flex 弹性容器：设置了display:flex;这个元素为弹性容器，里面的子元素会按照弹性布局的方式进行布局。 弹性子元素：设置了dispay:flex;的弹性容器的直接子元素，即为弹性子元素。 主轴的方向flex-direction 设置主轴的方向: row:从左到右（默认） co
css-布局display：flex
qq_41617261的博客
03-14 151
转载自：https://www.cnblogs.com/qingchunshiguang/p/8011103.html flex布局 flexible box：弹性盒子 任一容器可指定flex布局 .box{ display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/ display: flex; //将对象作为弹性伸缩盒显示 } 容器 两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认元素按主轴排列 mai
弹性布局（display：flex）
zy的博客
04-09 436
弹性布局（display：flex） 容器和项目 容器：父元素 项目：子元素 主轴和交叉轴 主轴：默认情况下，水平向右 交叉轴：默认情况下，垂直向下 换行(flex-wrap) /* 创建弹性布局 所有子元素默认在一排显示 */ /* 诺项目总宽度超过容器宽度，不会换行，会等比例压缩项目宽度 */ display: flex; /* 自动换行 */ flex-wrap: nowrap; /* 换行 */ flex-wrap: wrap; /* 反转，倒
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值