Flex 布局的常用使用场景都有哪些？

水平垂直居中

相信大家最常用的水平垂直居中的方法应该就是 Flex 弹性盒了，因为简单好用兼容性还好，而且不需要知晓子元素的宽高，所以一直很受大家的喜欢和偏爱。

方法一

css 复制代码

.father {
  display: flex;  
}

.son {
  margin: auto;  
}

史上最简单的垂直居中方法，一两行代码就能轻松搞定。

方法二

css 复制代码

body {
  display: flex;
  justify-content: center;
  align-items: center;  
}

这个方法只需要给父容器设置，其内部元素会按照横轴+侧轴的排列方式居中对齐。

表单元素

细心的朋友可能会发现上图中的搜索框中间会有空隙，这是由于 inline-block 元素的回车换行导致的，详见：去除inline-block元素间间距的N种方法 << 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)。

html 复制代码

<div class="box">
  <input type="text" placeholder="搜点什么" />
  <input type="button" value="搜索" />
</div>

css 复制代码

.box {
  display: flex;
}

能够看到，将容器设为弹性盒后就能很好的解决这个问题。

两栏布局

两栏布局是指一侧固定宽度，一侧自适应的一种布局方式。

方法一

这里还是先拿上边的案例举例：

假如我想让按钮为80px的宽度，而输入框进行自适应。

css 复制代码

.box {
  display: flex;
  width: 300px;
}

.box input:first-of-type {
  flex-grow: 1;
}

.box input:last-of-type {
  width: 80px;
}

这里的flex-grow: 1表示的是搜索框的宽度占据 flex 容器的所有剩余宽度，也可以直接写它的简写形式flex: 1。

方法二

和上个实例一样，只是把搜索框换成盒子可能会更好理解。

html 复制代码

<div class="container">
  <div class="left">菜单栏</div>
  <div class="right">内容区域</div>
</div>

css 复制代码

.container {
  display: flex;
}

.left {
  width: 100px;
  height: 200px;
  background-color: pink;
}

.right {
  flex: 1;
  height: 200px;
  background-color: purple;
}

现在应该能够更直观的看到两栏布局的使用场景了，很多网站都会用到，比如：CSDN、V2EX、知乎等。

三栏布局

三栏布局顾名思义就是左右两侧固定宽度，中间自适应的一种布局方式。一般网站首页中用的比较多，比如：掘金、Gitee、GitHub等。

方法一

老规矩，接着上回方法继续写。

html 复制代码

<div class="container">
  <div class="center">center</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

css 复制代码

.container {
  display: flex;
}

.center {
  flex: 1;
  width: 100%;
  height: 150px;
  background-color: purple;
}

.left {
  order: -1;
  width: 100px;
  height: 150px;
  background-color: pink;
}

.right {
  width: 200px;
  height: 150px;
  background-color: skyblue;
}

这里的order: -1是指子盒子排列顺序，数值越小越靠前，默认值为0。

方法二

不知道大家做后台管理的页面时有没有遇到过固定页脚的情况，就比如我想让它中间还没有表格数据时，让底部信息不要跟着一起上来，而当表格数据足够多时又不会被底部信息所遮挡。

再接上个案例，想象一下如果将它竖过来会不会就是我们想要的效果呢？

html 复制代码

<div class="container">
  <div class="center">
    内容区域
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
  </div>
  <div class="left">菜单栏</div>
  <div class="right">信息栏</div>
</div>

css 复制代码

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.center {
  flex: 1;
  background-color: purple;
}

.left,
.right {
  flex-shrink: 0;
}

.left {
  order: -1;
  height: 50px;
  background-color: pink;
}

.right {
  height: 50px;
  background-color: skyblue;
}

这里主要是用flex-direction: column将 flex 容器改为了纵轴排列，还有一点值得注意就是当内容部分扩充至底部区域时，菜单栏和信息栏的高度会受到挤压。

解决办法就是使用flex-shrink: 0，flex-shrink 的值默认为1，即如果空间不足，该项目将缩小。若把值设为0自然就可以避免内容区域的扩充而带来的影响。

结语

目前我所知道的大概就这些，以后想起来了再补充。

最后，码字不易，请大家多多点赞支持。