flex布局单独一行_Flexbox 布局入门

互联网早期实现布局是需要通过多种不同属性组合才能实现我们想要的布局。

比如常见的垂直居中，刚接触 css 的朋友看到 vertical-align: middle; 这个属性可能就会认为它就是用于垂直居中的，但实际上并没有那么简单。如果想要通过该属性来实现垂直居中，还需要其他小伙伴配合。

<style>
.container {
    
  width: 200px;
  height: 200px;
  border-radius: 6px;
  text-align: center;
  color: #fff;
  background: #e44b27;
  white-space: nowrap;
}

/* 该伪类是实现垂直居中关键 */
.container:after {
    
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.content {
    
  display: inline-block;
  white-space: normal;
  vertical-align: middle;
  text-align: left;
}
</style>

<div class="container">
  <div class="content">我想居中！</div>
</div>

这样看来，为了实现垂直居中布局，我们还得打一套组合拳才能出来才行，是不是看起来有点麻烦的样子？

W3C 在 2009 年提出的 Fiexbox(flex) 布局草案，就是针对用户界面设计优化的 CSS 盒模型。如果使用 flex 布局来实现上面的垂直居中布局的话，可以简化为：

<style>
.container {
    
  width: 200px;
  height: 200px;
  border-radius: 6px;
  color: #fff;
  background: #e44b27;

  /* 使用 flex 布局 */
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<div class="container">
  <div>我想居中！</div>
</div>

修改后的代码就显得更精简了，也不需要其他小伙伴来搭把手。布局的事情就让 flex 家族自己来解决即可。

---

目录

• 概念
• Flex 容器属性
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
• Flex 元素属性
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
  • order
• 兼容性
• 结束
• 参考资料

---

概念

应用 flex 布局的容器我们通常称为 弹性盒子/容器(flex container)。弹性容器可以由 display: flex 或 display: inline-flex 生成。弹性盒子的子项常称为 弹性元素/项目(flex items)，它以 flex 布局模型进行布局。

.container {
    
  display: flex | inline-flex;
}

如果想要学习 flex 布局的工作方式，最先需要学习的是它自身的术语。下面直接引用 flex 草案中术语的介绍图:

别被原版英文术语给吓倒了，咱们翻译一下其实就很好理解了：

在术语示意图中可以看到两根轴，分别是主轴(main axis)和垂直交叉轴(cross axis)。同时标注了主轴起点(main start)与终点(main end)，交叉轴的起点(cross start)与终点(cross end)。

默认情况下 flex 布局是按主轴的方向进行布局的。flex 元素所占据的 主轴空间(main size) 就是 flex 元素的宽度(width)、所占据的 交叉轴空间(cross size) 就是 flex 元素的高度(height)。

---

flex 容器属性

flex 容器里可以通过以下几种属性来控制容器的行为:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-content
• align-items

为了更好的观察各属性的行为，笔者在 codepen 上给不同属性都写了 demo 做参考。

目前有个新规范(CSS Box Alignment Module Level 3)正处于工作草案的状态中，对一些属性添加新值，比如 [first|last]? baseline、self-start、self-end、start、end、left、right、unsafe |