最近在项目里遇到了一个 Flex 布局的问题,才发现自己对它的理解还是停留在浅显的水平,遇到一些特殊情况就不知道如何处理。于是找了些资料深入学习一下,然后将我的学习心得总结成这篇文章。
先讲讲我遇到的问题。我希望实现一个左中右三列的布局,其中左右部分固定宽度,中间部分自适应:
实现起来很简单,代码如下:
<div class="container">
<div class="left">left</div>
<div class="middle">
middle
</div>
<div class="right">right</div>
</div>
.container {
display: flex;
width: auto;
height: 300px;
background: grey;
}
.left {
flex-basis: 200px;
background: linear-gradient(to bottom right, green, white);
}
.middle {
flex: 1;
background: linear-gradient(to bottom right, yellow, white);
}
.right {
flex-basis: 300px;
background: linear-gradient(to bottom right, purple, white);
}
到此为止一切都很美好。但遇到中间部分内容很长的时候,UI 就变形了:
为了固定住左右部分的宽度,需要给 left 和 right 加上flex-shrink: 0
。但加上后容器的宽度就被撑开了,页面底部出现了滚动条:
而我期望的效果是滚动条出现在中间部分,整个页面不能滚动。解决方法是给 middle 加上overflow: scroll
:
此时的完整代码如下:
<div class="container">
<div class="left">left</div>
<div class="middle">
middle
<!-- 宽度为800px的内容-->
<div class="long">long</div>
</div>
<div class="right">right</div>
</div>
.container {
display: flex;
width: auto;
height: 300px;
background: grey;
}
.left {
flex-basis: 200px;
flex-shrink: 0;
background: linear-gradient(to bottom right, green, white);
}
.middle {
flex: 1;
overflow: scroll;
background: linear-gradient(to bottom right, yellow, white);
}
.right {
flex-basis: 300px;
flex-shrink: 0;
background: linear-gradient(to bottom right, purple, white);
}
.long {
width: 800px;
}
完整的 codepen
在这里
实战经验到此结束,下面我们再深入学习涉及到的知识点。
先来讲讲上面用到的属性flex: 1
。它其实是一个缩写,等价于flex: 1 1 0
,也就是
flex-grow : 1;
flex-shrink : 1;
flex-basis : 0;
下面来讲讲 flex 空间分配的步骤。
假设有一个宽度为 800 的容器,里面有 3 个项目,宽度分别是 100,200,300:
<div class="container">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
.container {
display: flex;
width: 800px;
height: 300px;
background: grey;
}
.left {
flex-basis: 100px;
background: linear-gradient(to bottom right, green, white);
}
.middle {
flex-basis: 200px;
background: linear-gradient(to bottom right, yellow, white);
}
.right {
flex-basis: 300px;
background: linear-gradient(to bottom right, purple, white);
}
效果如下:
这时候就出现了多余的 200 的空间(灰色部分)。这时候如果我们对左中右分别设置flex-grow
为 2,1,1,各个项目的计算逻辑如下:
假设父容器宽度调整为 550,里面依然是 3 个项目,宽度分别是 100,200,300,这时候空间就不够用溢出了。首先要理解清楚,当我们定义一个固定宽度容器为flex
的时候,flex
会尽其所能不去改变容器的宽度,而是压缩项目的宽度。这时我们对左中右分别设置flex-shrink
为 1,2,3,计算逻辑如下:
如果我们不想项目被压缩,就必须将flex-shrink
设为 0。还是用上面的例子,当左中右的flex-shrink
都为 0 的时候,就会冲破宽度限制,container的宽度将会从 550 变为 600。
codepen
在这里
flex-basis
指定项目占据主轴的空间,如果不设置,则等于内容本身的空间:
本文从问题出发,讲解了Flex
布局在实战中的应用,并深入到flex-grow
,flex-shrink
和flex-basis
的细节,描述了项目空间在填充和溢出情况下的计算方式,希望对你有所帮助。