重学前端学习笔记（三十六）--Flex 布局

笔记说明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。

一、介绍

这一篇主要从设计、原理和应用三个方面来学习一下 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;
}
复制代码

个人总结

还是移动端用起来舒服。。。听说想要前端进击的话图形学是要深究的。。。

转载于:https://juejin.im/post/5d18956d5188255d3c014ed5