神器--Flexbox

这是一篇介绍和简单的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 [ || ] 上面两个的合体
• 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 [] 排列顺序，默认 0.
• flex-grow [] 放大比例，默认 0,即如果存在剩余空间，也不放大.
• flex-shrink 项目的缩小比例，默认为1，即如果空间不足，该item将缩小
• flex-basis [ | 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 打造栅格布局》

欢迎关注我的专栏知乎前端杂货铺

参考:

• A Complete Guide to Flexbox
• flexbox