前言

在之前的一篇文章《CSS经典面试题-常用的CSS两栏和三栏布局方案》中，我们有一道题目是通过flex去实现三栏布局的。

今天这篇文章我们来具体看看，flex是如何实现页面布局的，希望加深大家对flex的理解。

CSS

flex布局的含义

flex布局又名为‘弹性布局’，主要是通过设置的属性值自动调整元素的宽度和高度值，在容器空间充裕的情况下，使其填满容器的剩余空间；又或者在容器空间不足的情况下，收缩元素的高度和宽度，使其不会溢出容器。

使用flex布局，可以灵活的控制元素在容器内的展示。尤其是对于移动端小屏幕来说，flex基本已成了主流的布局方式。

flex布局的基本概念

在flex布局中，有几个概念是我们必须掌握的，可以从下面这个图中看出。

flex布局

flex布局，实际就是一个弹性容器内部元素的排列。

flex容器中存在一个主轴和侧轴的概念，表示的是容器内元素排列的方向。在默认情况下，弹性项目会沿着主轴方向排列，即上图所示的水平方向。当然也可以通过flex-direction属性去设置。

在flex中有6个可以设置在容器上的属性，有6个可以设置容器内项目的属性，这些基本知识大家可以自行去查看官方文档，下面我们看看flex布局的计算过程。

flex布局的实例

在很多网站中，我们可以看到这样的效果，当鼠标移动到指定的元素后，该元素展示详情，其他元素收缩。

基本效果如下图所示。

flex布局实例1

我们先看看代码部分，再去分析为什么会达到这个效果。

• HTML代码

HTML部分代码很简单，无需多讲。

HTML代码

• CSS代码

首先是容器的基本样式，设置display为flex，为了更好的兼容性，在某些属性上加上-webkit-前缀。

容器属性

然后是给容器内子项目设置flex相关属性，为了让效果看起来更平滑，加上了动画。

容器内子项目属性

最后是很重要的一点，就是在鼠标滑过时，改变该子项目的宽度。

鼠标滑过

解析计算过程

通过以上的属性，为什么就能达到上面的效果呢？

• 初始宽度值

在鼠标未经过容器时，容器会根据设置的flex值自动计算每个子项目占据的实际宽度值。

每个子项目的flex值为1, 1, auto。

1. 第一个1表示的是，在容器有剩余空间时，每个子项目都进行一等分剩余空间。

2. 第二个1表示的是，当容器空间不足时，每个子项目一等分的减少超出的空间。

3. 第三个参数auto表示的是宽度值取决于其他属性值，这个题目中是width值。

我们再来看看计算过程。

容器总宽度为450px，每个div宽度值为30px，则三个div就是30*3=90px。

那么剩余空间就是450px-90px=360px。

因为每个div的flex-grow属性为1，则表示将剩余空间分为1+1+1=3等分。

那么每等分空间的宽度就是360/3=120px。

那么最后每个div占据的实际宽度就是120px+30px=150px。

• 鼠标滑过

当鼠标滑过时，设置了:hover类，其中width值变为200px，这里会重新计算各个div的宽度值。

三个div占据的宽度值为200px+30px+30px = 260px。

剩余空间450px-260px=190px。

剩余空间三等分后，每等分空间的宽度是190/3=63.33px。

那么未滑过鼠标的div占据的实际空间是63.33+30=93.33px。

滑过鼠标的div占据是实际空间是63.33+200=263.33px。

通过以下的图可以看出。

结果图

结束语

今天这篇文章通过一个布局实例，讲解了flex布局的计算过程，其实大家在掌握了flex属性的几个特定值后就可以很容易的算出占据的宽度值。

今天这篇文章大家有没有理解呢？