重学前端 36 # Flex 布局

说明

每天10分钟，重构你的前端知识体系专栏笔记。

一、介绍

这一篇主要从设计、原理和应用三个方面来学习一下 Flex 布局。

详细的可以看看下面两篇文章：来自​​阮一峰的网络日志​​

• ​​Flex 布局教程：语法篇​​
• ​​Flex 布局教程：实例篇​​

二、Flex 的设计

​​Flex​​​ 排版的核心是 ​​display:flex​​​ 和 ​​flex​​​ 属性，它们配合使用。具有 ​​display:flex​​​ 的元素我们称为 ​​flex​​​ 容器，它的子元素或者盒被称作 ​​flex​​ 项。

三、Flex 的原理

winter说 Flex 的实现并不复杂，之前winter​​写过一个基本实现提交给 spritejs 项目，代码可以参考​​

如何实现一个 Flex 布局？

3.1、第一步：分行

把 flex 项分行，有 Flex 属性的 flex 项可以暂且认为主轴尺寸为 0，所以，它可以一定放进当前行。

3.2、第二步：计算主轴

计算每个 flex 项主轴尺寸和位置。

3.3、第三步：计算交叉轴

计算 flex 项的交叉轴尺寸和位置。

四、Flex 的应用

4.1、垂直居中

<div id="parent">
  <div id="child">
  </div>
</div>

#parent {
  display:flex;
  width:300px;
  height:300px;
  outline:solid 1px;
  justify-content:center;
  align-content:center;
  align-items:center;
}
#child {
  width:100px;
  height:100px;
  outline:solid 1px;
}

4.2、两列等高

<div class="parent">
  <div class="child"style="height:300px;">
  </div>
  <div class="child">
  </div>
</div>
<br/>
<div class="parent">
  <div class="child" >
  </div>
  <div class="child"style="height:300px;">
  </div>
</div>

.parent {
  display:flex;
  width:300px;
  justify-content:center;
  align-content:center;
  align-items:stretch;
}
.child {
  width:100px;
  outline:solid 1px;
}

4.3、自适应宽

<div class="parent">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
</div>

.parent {
  display:flex;
  width:300px;
  height:200px;
  background-color:pink;
}
.child1 {
  width:100px;
  background-color:lightblue;
}
.child2 {
  width:100px;
  flex:1;
  outline:solid 1px;
}