当前位置: 首页 » 代码 » CSS » Flex布局某个项目固定宽度时得不到期望值

Flex布局某个项目固定宽度时得不到期望值

发布时间:2017-06-27

CSS 代码

, ,

热度:98

关于flex弹性布局在此不多做赘述,基础用法可见阮一峰blog文章《Flex 布局教程:语法篇》,本篇文章主要讨论一些在实际开发应用中常用布局中的一个坑。

问题:某个项目固定宽度时得不到期望值

实现如下图效果,容器宽度800px,第一项宽度占容器宽度一半,剩下的平分剩余宽度。


对应的代码:

.flex-row{
	display: flex;
	height: 100px;
	width: 800px;
	border: 1px solid #666666;
				
}
.flex-row .flex-ietm{
	border: 1px dashed #CCCCCC;
	flex: 1;
        text-align: center;
	line-height: 100px;
	font-size: 24px;
	box-sizing: border-box;
}
.flex-row .flex-ietm:first-child{
	flex-basis: 50%;    /*等同于flex-basis: 400px;*/
}

但是实际得到的效果如下图:


为什么会得到465px呢???465px的数值是怎么来的?仔细的查找资料,做测试后才恍然大悟,原因如下:


flex属性是flex-growflex-shrinkflex-basis的缩写

上面的flex:1;相当与写了两条属性flex-grow:1;flex-shrink:1;,因此在第一个项目本身占据一半容器宽度(400px)之后,还参与了剩余空间的平分工作,实际宽度:400+(400÷6)≈466.66,扣除掉边框,就约等于465px了。

如果我们想要实现我们一开始的目标,必须要让第一个项目不参与平分工作。因此第一项正确的代码如下:

.flex-row .flex-ietm:first-child{
	flex-basis: 50%;    /*等同于flex-basis: 400px;*/
	flex-grow: 0;		/*取消有剩余空间时的放大效果*/
}


去顶部