css3项目属性——弹性盒布局（骰子）

最新推荐文章于 2022-04-05 12:25:04 发布

Lohas~

最新推荐文章于 2022-04-05 12:25:04 发布

阅读量912

点赞数

本文链接：https://blog.csdn.net/weixin_45625673/article/details/100705509

版权

项目属性

设置容器内项目相关样式，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。
项目元素属性集合：order、flex-grow、flex-shrink、flex-basis、flex、align-self

order属性

设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前，属性值为整数

flex-shrink属性

时当项目在主轴方向上溢出，通过设置项目收缩因子来压缩项目适应容器。
属性值为项目的收缩因子，属性值取非负数未设置flex-shrink时，默认flex-shrink值为1

在这里插入图片描述

flex-shrink属性案例：

 一个宽度为400px的容器，里面的三个项目width分别为120px，150px，180px。
 分别对这项目1和项目2设置flex-shrink值为2和3。
 
 在这个例子中，项目溢出 400 - (120 + 150 + 180) = -50px。
 计算压缩量时总权重为各个项目的宽度乘以flex-shrink的总和，
 这个例子压缩总权重为120 * 2 + 150 * 3+ 180 * 1 = 870。
 
 各个项目压缩空间大小为总溢出空间乘以项目宽度乘以flex-shrink除以总权重：
 item1的最终宽度为：120 - 50 * 120 * 2 / 870 ≈ 106px
 item2的最终宽度为：150 - 50 * 150 * 3 / 870 ≈ 124px
 item3的最终宽度为：180 - 50 * 180 * 1 / 870 ≈ 169px

 当项目压缩因子相加小于1时，参与计算的溢出空间不等于完整溢出空间。
 总权重为：120 * 0.1 + 150 * 0.2 + 180 * 0.3 = 96。
 参与计算的溢出空间不再是50px，而是50 * (0.1 + 0.2 + 0.3) / 1 =30：
 item1的最终宽度为：120 - 30 * 120 * 0.1 / 96 ≈ 116px
 item2的最终宽度为：150 - 30 * 150 * 0.2 / 96 ≈ 140px
 item3的最终宽度为：180 - 30 * 180 * 0.3 / 96 ≈ 163px

在这里插入图片描述

扩张因子flex-grow:

场景：grow英文意思是<扩大，扩展，增加>，这就代表当父元素的宽度大于子元素宽度之和时，
并且父元素有剩余，此时flex-grow就可以使得子元素扩张，分享父元素的空间。
取值：flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。

在这里插入图片描述
项目1：扩张因子为0默认值，则不会索取父级多余空间
项目2：扩张因子为1，会索取剩余空间，最终大小为
自身宽度（50px）+获取的剩余空间宽度250*(1/(1+2))=133.33px
项目3：扩张因子为2，会索取剩余空间，最终大小为
自身宽度（50px）+获取的剩余空间宽度250*(2/(1+2))=216.67px

项目属性flex-basis

当容器设置flex-direction为row或row-reverse，flex-basis和width同时存在，
flex-basis优先级高于width，也就是此时flex-basis代替width属性。
当容器设置flex-direction为column或column-reverse，flex-basis和height同时存在，
flex-basis优先级高于height，就是此时flex-basis代替height属性。
需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，
非auto的优先级更高。

项目属性align-self

设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items，
可以对项目的对齐方式做特殊处理。默认属性值为auto，
继承容器的align-items值，当容器没有设置align-items时，属性值为stretch。

经典案例-骰子模型

.box{
				width: 70px;
				height: 70px;
				border-radius: 5px;
				background: rgba(0,0,0,.6);
				float: left;
				margin:5px ;
			}
			.one{
				width: 20px;
				height: 20px;
				border-radius:50% ;
				background: white;
			}
			.a{
				display: flex;
				justify-content: center;
			}
			.b{
				display: flex;
				justify-content: flex-end;
			}
			.c{
				display: flex;
				justify-content:  space-between;
				
			}
			.d{
				display: flex;
				flex-direction: column;
				justify-content:space-between;
			}
			.aa{
				align-self: flex-end;
			}
			.bb{
				align-self:  center;
			}
			.cc{
				align-self: flex-end ;
			}
			.e{
				display: flex;
				justify-content:space-between;
				flex-wrap: wrap;
				align-content: space-between;
			}
			.dd{
				margin-top: 25px;
			}
			.box_box{
				width: 560px;
				border: 1px solid black;
				overflow: hidden;
				height: 240px;
			}
		
			<body>
				<div class="box_box">
				<div class="box">
					<p class="one">
						
					</p>
				</div>
				<div class="box a">
					<p class="one">
						
					</p>
				</div>
				<div class="box b">
					<p class="one">
						
					</p>
				</div>
				<div class="box c">
					<p class="one"></p>
					<p class="one"></p>
				</div>
				<div class="box d">
					<p class="one aa"></p>
					<p class="one aa"></p>
				</div>
				<div class="box c">
					<p class="one"></p>
					<p class="one bb"></p>
					<p class="one cc"></p>
				</div>
				<div class="box e">
					<p class="one"></p>
					<p class="one dd"></p>
					<p class="one"></p>
					<p class="one"></p>
					<p class="one"></p>
				</div>
			    
			</div>
			</body>

在这里插入图片描述