深入理解Flex布局 -- flex-grow & flex-shrink & fl

sydMobile 发布于2019-08-30 15:55 / 2000人阅读

摘要：我希望实现一个左中右三列的布局，其中左右部分固定宽度，中间部分自适应实现起来很简单，代码如下到此为止一切都很美好。解决方法是给加上此时的完整代码如下宽度为的内容完整的在这里实战经验到此结束，下面我们再深入学习涉及到的知识点。

欢迎关注我的公众号睿Talk，获取我最新的文章：

一、前言

最近在项目里遇到了一个 Flex 布局的问题，才发现自己对它的理解还是停留在浅显的水平，遇到一些特殊情况就不知道如何处理。于是找了些资料深入学习一下，然后将我的学习心得总结成这篇文章。

二、问题还原

先讲讲我遇到的问题。我希望实现一个左中右三列的布局，其中左右部分固定宽度，中间部分自适应：

实现起来很简单，代码如下：


  left
  
    middle
  
  right


.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：

此时的完整代码如下：


  left
  
    middle
    
    long
  
  right


.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-grow 表示当有剩余空间的时候，分配给项目的比例

flex-shrink 表示空间不足的时候，项目缩小的比例

flex-basis 表示分配空间之前，项目占据主轴的空间

下面来讲讲 flex 空间分配的步骤。

flex-grow（默认值 0）

假设有一个宽度为 800 的容器，里面有 3 个项目，宽度分别是 100，200，300：


  left
  middle
  right


.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，各个项目的计算逻辑如下：

首先将多余空间 200 除以 4（2 + 1 + 1），等于 50

left = 100 + 2 x 50 = 200

middle = 200 + 1 x 50 = 250

right = 300 + 1 x 50 = 350

flex-shrink（默认值 1）

假设父容器宽度调整为 550，里面依然是 3 个项目，宽度分别是 100，200，300，这时候空间就不够用溢出了。首先要理解清楚，当我们定义一个固定宽度容器为flex的时候，flex会尽其所能不去改变容器的宽度，而是压缩项目的宽度。这时我们对左中右分别设置flex-shrink为 1，2，3，计算逻辑如下：

溢出空间 = 100 + 200 + 300 - 550 = 50

总权重 = 1 x 100 + 2 x 200 + 3 x 300 = 1400

left = 100 - (50 x 1 x 100 / 1400) = 96.42

middle = 200 - (50 x 2 x 200 / 1400) = 185.72

right = 300 - (50 x 3 x 300 / 1400) = 267.86

如果我们不想项目被压缩，就必须将flex-shrink设为 0。还是用上面的例子，当左中右的flex-shrink都为 0 的时候，就会冲破宽度限制，container的宽度将会从 550 变为 600。

codepen 在这里

flex-basis（默认值 auto）

flex-basis指定项目占据主轴的空间，如果不设置，则等于内容本身的空间：

四、总结

本文从问题出发，讲解了Flex布局在实战中的应用，并深入到flex-grow，flex-shrink和flex-basis的细节，描述了项目空间在填充和溢出情况下的计算方式，希望对你有所帮助。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117224.html

深入理解 flex-grow &amp; flex-shrink &amp; flex-basis

摘要：前言有三个属性值，分别是，，，默认值是。的宽度分别是，父级的宽度是，父级宽减去子级的全部宽度，这样剩余空间就是。当然工作中最好用，更符合规范。如果父级的空间不够有效，无效。前言 flex 有三个属性值，分别是 flex-grow， flex-shrink， flex-basis，默认值是 0 1 auto。发现网上详细介绍他们的文章比较少，今天就详细说说他们，先一个一个看。 fl...

Bowman_han 2019-08-05 10:05 评论0 收藏0
深入理解 flex-grow &amp; flex-shrink &amp; flex-basis

摘要：前言有三个属性值，分别是，，，默认值是。的宽度分别是，父级的宽度是，父级宽减去子级的全部宽度，这样剩余空间就是。当然工作中最好用，更符合规范。如果父级的空间不够有效，无效。前言 flex 有三个属性值，分别是 flex-grow， flex-shrink， flex-basis，默认值是 0 1 auto。发现网上详细介绍他们的文章比较少，今天就详细说说他们，先一个一个看。 fl...

libin19890520 2019-08-01 15:40 评论0 收藏0
深入理解 flex-grow &amp; flex-shrink &amp; flex-basis

摘要：前言有三个属性值，分别是，，，默认值是。的宽度分别是，父级的宽度是，父级宽减去子级的全部宽度，这样剩余空间就是。当然工作中最好用，更符合规范。如果父级的空间不够有效，无效。前言 flex 有三个属性值，分别是 flex-grow， flex-shrink， flex-basis，默认值是 0 1 auto。发现网上详细介绍他们的文章比较少，今天就详细说说他们，先一个一个看。 fl...

Richard_Gao 2019-08-29 11:10 评论0 收藏0
React Native基础&amp;入门教程：初步使用Flexbox布局

摘要：图大小的内容在同样尺寸的屏幕中所占据的物理大小一致中字体大小使用另外一个单位，叫做，简称。其中二布局布局，也就是弹性盒模型布局。所以这里最外层的使用了布局的，，表示让它占据了垂直的整个空间。在上篇中，笔者分享了部分安装并调试React Native应用过程里的一点经验，如果还没有看过的同学请点击《React Native基础&入门教程：调试React Native应用的一小步》。在本篇里，...

番茄西红柿 2019-04-23 17:18 评论0 收藏0
CSS6：flex布局

摘要：主要用来做横向的布局。元素的布局学习我分成两个部分，第一个部分是元素布局。以下几个属性影响着元素的布局。详细还是看分钟彻底弄懂布局讲的非常明白。的时候，伸缩时需要考虑，按照进行等比例伸缩。布局套路学习布局教程实例篇前言：这是我看过最好的flex布局教程：30分钟彻底弄懂flex布局传统的布局方法与flex属性通览 showImg(https://segmentfault.com/i...

Jioby 2019-08-29 17:09 评论0 收藏0