这是一篇介绍和简单的flex 布局的教程
Intro
Flexbox布局 是一种为了解决现代web 复杂布局的新型的css3布局方案。
印象中最深的一次了解flex布局是在css conf上，Git Cafe的工程师讲的.但当时由于其还没有得到各大浏览器厂商的广泛支持，我有专注于js没太在意这块的东西，所以仅仅只是一个了解。
但随着react 的革命，让我们享受到组件化带来的便利的同时，也带来了js工程也需要考虑css的布局，特别是css组件化。更重要的原因还是随着手机端的不断普及，还有浏览器对对css3新特性的支持，让我们有幸使用到了更好的布局解决方案。
浏览器支持情况
Why Flexbox
我们一直习惯于使用tables, floats, inline-blocks 以及其他css属性来布局界面。
但其实这些属性都不是为了现代复杂交互的网页和webapp的布局而设计的。比如，简单的垂直居中就不容易实现；复杂的flexible grid布局 实现起来更加费劲。
How
两个重要的元素：
container 和 item
flexbox
container
container 存在两根轴 main axis 和cross axis.
container的属性:
-
flex-direction [row | row-reverse | column | column-reverse]main axis的方向 -
flex-wrap [nowrap | wrap | wrap-reverse]默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 -
flex-flow [<flex-direction> || <flex-wrap>]上面两个的合体 -
justify-content [flex-start | flex-end | center | space-between | space-around]对齐方式 main axis -
align-items [flex-start | flex-end | center | baseline | stretch]对齐方式 cross axis -
align-content [flex-start | flex-end | center | space-between | space-around | stretch]定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
item
item 则沿着 main axis排布。
单个item所占的空间分别用 main size 和 cross size 表示。
item的属性:
-
order [<integer>]排列顺序，默认 0. -
flex-grow [<number>]放大比例，默认 0,即如果存在剩余空间，也不放大. -
flex-shrink项目的缩小比例，默认为1，即如果空间不足，该item将缩小 -
flex-basis [<length> | auto; /* default auto */]分配多余空间之前，项目占据的 main size, 默认auto -
flex none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 -
align-self [auto | flex-start | flex-end | center | baseline | stretch]让单个item有与其他item不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
预告:下面会有一篇关于《Flexbox 打造栅格布局》
欢迎关注我的专栏知乎前端杂货铺
参考:
