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;
}

这里写图片描述
Demo源码地址

然后，我们再来了解一个知识点：容器的两个轴线，可以类比为x,y坐标轴。

这里写图片描述

水平主轴(main axis)
垂直交叉轴(cross axis)

主轴布局又分为：start-center-end
交叉轴布局：start-center-end

每个容器中的item默认布局都是：从主轴的起始到主轴的结尾。

2.Flex的必要性

以前我们的布局方式基本都是通过position、float以及其他css属性结合完成的。但是面对复杂页面，以及在不同分辨率下的展示效果，原有的布局就显得捉襟见肘了，就会出现一系列局部兼容性问题。

因此，flex布局就应运而生了，为我们的前端开发提供了一个很好的布局方案。

3.目前主流布局都有哪些

固定式布局
流式布局
弹性布局
浮动布局
定位布局
圣杯布局

1.固定式布局

即宽度，高度固定，页面被一个固定网页包裹，容器不能移动，页面的宽高不随页面的变化而变化，这种布局大家比较熟悉，这种方式一度成为页面布局的主流方式，这样布局设计简单，更容易定义，但是由于屏幕尺寸的不同，特别是移动端各个设备的不同，这种布局在灵活性方式可用度不高。
常见于官方主页，比如：人民日报官网、西安交大官网等。