使用 Flex 布局与其余普通布局的简单对比

最近使用 flex 布局来作各类居中真的带来了很多方便，如今来总结一下平时的普通布局是怎样使用 flex 布局来实现同样的效果。

1、左右 1:1 布局

布局：

<div class="container">
  <div class="child">LEFT</div>
  <div class="child">RIGHT</div>
</div>
复制代码

利用 float 属性

在使用 flex 以前，实现这种布局主要是利用 float 属性，使元素脱离文档流，同时由于要实现 1:1 的比例，要将子元素的 width 设为 50%。同时要记得在后面的元素添加 clear:both 属性。

.container {
  margin: 40px;
  height: 600px;
}

.child {
  width: 50%;
  height: 100%;
  float: left;

  box-sizing: border-box;
  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  text-align: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
}
复制代码

利用 flex-basis

若是使用 flex 布局，要将容器（父元素）display 设为 flex，项目（子元素）设定 flex-basis 值为 50%就能够实现 1:1 布局了，这个属性和 width 做用差很少，主要是指定 flex 元素在主轴方向上的初始大小。

.container {
  margin: 40px;
  height: 600px;
  display: flex;
  flex-direction: row;
}

.child {
  height: 100%;
  flex-basis: 50%;

  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  text-align: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
}
复制代码

利用 flex: 1

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%。因而就能够在子元素上使用 flex: 1 来实现平均布局，而且对于不一样数量的子元素都适用。谢谢 @pingan8787

.container {
  margin: 40px;
  height: 600px;
  display: flex;
  flex-direction: row;
}

.child {
  height: 100%;
  flex: 1;

  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  text-align: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
}
复制代码

2、左中右 1:1:1 布局

实现方法其实和上面差很少，都是使用 float 和 flex-basis 属性来指定比例为 33.3%来实现。

布局：

<div class="container">
  <div class="child">LEFT</div>
  <div class="child">MIDDLE</div>
  <div class="child">RIGHT</div>
</div>
复制代码

利用 float 属性

.container {
  margin: 40px;
  height: 600px;
}

.child {
  width: 33.3%;
  height: 100%;
  float: left;

  box-sizing: border-box;
  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  text-align: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
}
复制代码

利用 flex: basis

.container {
  margin: 40px;
  height: 600px;
  display: flex;
  flex-direction: row;
}

.child {
  height: 100%;
  flex-basis: 33.3%;

  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  text-align: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
}
复制代码

利用 flex: 1

和上面的左右布局代码同样，比 flex-basis: 33.3% 好，推荐使用。

3、水平居中布局

布局：

<div class="container">
  <div class="child">CHILD</div>
</div>
复制代码

利用 margin

相信大部分人都知道对于块级子元素利用简单的margin: 0 auto就能实现了吧，这就很少介绍了。

.container {
  margin: 40px;
  height: 600px;
}

.child {
  height: 100%;
  width: 50%;
  margin: 0 auto;

  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  text-align: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
}
复制代码

利用 flex 布局

主要起做用的属性是 justify-content，它定义了项目在主轴上的对齐方式，因此只需把它设为 center 就能实现了，前提是父元素的 flex-direction 属性为 row，不过默认就是 row。

.container {
  margin: 40px;
  height: 600px;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%;
  width: 50%;

  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  text-align: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
}
复制代码

4、垂直居中布局

对于通常来讲，都是利用上下padding来实现垂直居中，不多会有父元素height值为固定值这种需求。这里为了体现flex的特性，特意对比在父元素height值固定的状况下如何实现垂直居中。

布局：

<div class="container">
  <div class="child">CHILD</div>
</div>
复制代码

利用 line-height

对于垂直居中就没有水平居中这么好写了，我平时主要是设置 line-height 配合 inline-block 这种方法来实现的。

将父元素 line-height 设为其 height 的值，而且将子元素的 display 属性设为 inline-block，再利用 vertical-align 将本身定位在父元素垂直轴上中心就可实现了。可是要记得将子元素的 line-height 初始化（initial），由于 line-height 默认是继承父元素的值的。

.container {
  margin: 40px;
  height: 600px;
  border: rgb(65, 184, 131) 8px solid;
  line-height: 600px;
  text-align: center;
}

.child {
  display: inline-block;
  height: 50%;
  width: 80%;
  vertical-align: middle;
  line-height: initial;
  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  color: rgba(255, 255, 255, 0.7);
  font-size: 40px;
}
复制代码

利用 flex 布局

若是使用 flex 就很简单了，要控制父元素的 align-items 属性便可，它主要定义项目（子元素）在交叉轴上如何对齐。

.container {
  margin: 40px;
  height: 600px;
  border: rgb(65, 184, 131) 8px solid;

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

.child {
  height: 50%;
  width: 80%;

  background-color: rgb(53, 73, 94);
  border: rgb(65, 184, 131) 8px solid;
  color: rgba(255, 255, 255, 0.7);
  font-size: 40px;
  text-align: center;
}
复制代码

利用 table

小结

flex布局对于作各类居中带来了不小方便，同时现在现代浏览器对其兼容性也不错了。最后推荐两篇干货文章。

• 阮一峰：Flex 布局教程（语法篇）
• 颜海镜：CSS实现水平垂直居中的1010种方式