Flexible Box
弹性布局(flexbox)，第一次见到这种布局方式的我，有种第一次遇到外国人一样的好奇，咦~这个人长得这么特别，黄头发大鼻头深眼窝。然后，在好奇心的趋势下，我就打算一窥究竟，它的内部构造到底是和我们有什么不同的(我们不一样~)。
直到我遇到了bootsrap的库之后，我深深被它的弹性布局吸引，感觉是一个很高大上的布局方式。通过深入探索之后，我才发现它应用的布局方式就是结合flex布局和媒体查询这两大特性。因此，有必要再从头学一遍flex 这种超爽体验的布局方式了。
本章将由下面四部分进行展开：
- flex布局概念
- 主流布局种类
- flex必要性
- 应用场景
1.什么是flex布局
弹性布局(flexbox)，它是用来为我们原有的盒模型的一种扩展，提供了一种灵性。
谈到灵性，可以参考一个网站点击这里查看网页内容。它就是使用flex布局方式进行排列，并且很智能化的按照不同分辨率的大小，进行不同的排版风格的变换。
那么到底什么才是弹性布局呢？
首先，我们有两个概念来了解一下：
- 容器（container）
- item
要采用Flex布局的元素，必须放入在一个flex容器中。而它的所有子元素会继承改属性，成为容器的item。
.container {
width: 500px;
height: 500px;
background-color: #000;
/** 父节点flex容器 */
display: flex;
/** 布局方式：从left到right进行布局 */
align-content: flex-start;
}
/** 子元素自动继承flex布局 */
.item {
height: 100px;
width: 100px;
margin: 10px 10px;
background-color: #ccc;
}
然后，我们再来了解一个知识点：容器的两个轴线，可以类比为x,y坐标轴。
- 水平主轴(main axis)
- 垂直交叉轴(cross axis)
主轴布局又分为：start-center-end
交叉轴布局：start-center-end
每个容器中的item默认布局都是：从主轴的起始到主轴的结尾。
2.Flex的必要性
以前我们的布局方式基本都是通过position、float以及其他css属性结合完成的。但是面对复杂页面，以及在不同分辨率下的展示效果，原有的布局就显得捉襟见肘了，就会出现一系列局部兼容性问题。
因此，flex布局就应运而生了，为我们的前端开发提供了一个很好的布局方案。
3.目前主流布局都有哪些
- 固定式布局
- 流式布局
- 弹性布局
- 浮动布局
- 定位布局
- 圣杯布局
1.固定式布局
即宽度，高度固定，页面被一个固定网页包裹，容器不能移动，页面的宽高不随页面的变化而变化，这种布局大家比较熟悉，这种方式一度成为页面布局的主流方式，这样布局设计简单，更容易定义，但是由于屏幕尺寸的不同，特别是移动端各个设备的不同，这种布局在灵活性方式可用度不高。
常见于官方主页，比如：人民日报官网、西安交大官网等。
2.流式布局
常见于一些网络相册图片的一种布局。
项目源码
3.弹性布局
目前主流布局方式，可以结合媒体查询功能进行响应式布局。
北京大学官网 可以结合西安交大官网对比。
4.浮动布局
利用float进行布局，这是一种常见的布局方式。可以解决块级元素的并列展示问题。不过这是一种破坏文档流的布局方式，所以，现阶段的开发会尽可能不用该属性。
常见于导航条布局方式。
5.定位布局
我以前最长用的一种布局方式，结合4.浮动布局进行网站开发。
主要利用position属性进行定位布局。
6.圣杯布局
这也是一种常见的布局方式。
项目源码
4.Flex的应用场景
最主流的一种应用就是响应式布局，详见北大、清华官网。
悬挂式布局
流式布局
圣杯布局
具体实现方法会在后面讲到。谢谢观看。
