flexbox使用指南

背景知识

Flexbox Layout(Flexible Box) 模块在当前W3C工作草案中还是处于WD草案，目标是提供一个灵活高效的布局方式。对容器中的项目进行对齐和分布，即使项目的尺寸是位置或动态的，所以叫做”Flex"中文即为弹性。

其实现思想就是flexbox layout给予了父容器改变他子项目宽度、高度、排序的能力。使子项目充分利用父容器的空间(主要是为了适应各种设备和屏幕)。当容器扩大子项目会自动扩展，或者容器收缩子项目也会收缩已防止溢出容器。

还有一个重要的是，flexbox layout是和方向无关的，对比常规的布局(block是垂直的inline是水平的)虽然他们在网页中大多数时候能满足我们的需求，但是对于更大更复杂的web程序来说他们缺乏灵活性(尤其涉及到方向、扩大、收缩、位置等)。

Flexbox layout 非常适合做一个web程序的组件，和小规模的布局。而Grid则适合更大规模的布局

基本概念

由于flexbox是一个整个模块规范。所以并不是一个单一的属性，涉及的知识相对来说比较多(他涉及一整套的属性定义)。其中一些属性是要设置在父容器上的(称之为’flex container’)，一些是设置在子元素上面的(称之为’flex items')

我们经常使用的block和inline是基于flex direction(自上而下的流行方向)方向，而flex layout是基于flex-flow方向，如果你还没有这个概念请看下图，这个图片解释flex layout布局的核心思想

基本上，flex items 会被排放在主轴(main axis)上从main-start到main-end，或者排放在侧轴(corss axis)从corss-satrt到corss-end。

• 主轴(main axis) 是flex container定义的一个轴，flex items会沿着主轴依次排列
• 主轴起点(main-start)|主轴终点(main-end) flex items 会被排列在他们之间
• 主轴尺寸(main-size) 一个flex items的宽度对应主轴(main axis)，所以称为主轴尺寸(main size)
• 侧轴(corss axis) 他垂直于主轴，flex items 排列的方向将由flex-direction确定
• 侧轴起点(corss-start)|侧轴终点(corss-end) 如果flex-direction为column则flex items将会在他们之间排列
• 侧轴尺寸(corss-size) 一个flex items的高度对应侧轴(corss axis)，所以称为侧轴尺寸(corss size)

容器介绍

每一个flex布局都会有一个容器(flex container)元素，他是所有项目(flex items)的直接父元素，像下面图片这样。

flex container

display 属性
他用来定义容器的类型根据我们给定的不同值(flex、inline、block)。
css
.container { display: flex; /* or inline-flex */}

提示：我们在这个container元素中定义这个属性看不到任何的效果

```flex-direction``` 属性
![](http://upload-images.jianshu.io/upload_images/3380069-63db3335789f5580.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
用来确定主轴的方向，flex是一个单方向的布局概念，flex items 只能沿着一个方面进行排列(横排(horizontal rows)或者竖排(vertical columns))
```css```
.container { flex-direction: row | row-reverse | column | column-reverse;}

• row (默认)： 书写模式为ltr从左到右，书写模式为rtl从右向左
• row-reverse: 书写模式为ltr从右到左，书写模式为rtl从左到右
• column: 同row但是他是从上到下
• column-reverse: 同row-reverse但是他是从下到上

flex-wrap 属性

默认的flex items 都会在一行排列，通过这个属性你可以更改他，让flex items是否支持换行(提示：在老版本中相同属性 box-lines没有被浏览器实现)
css
.container{ flex-wrap: nowrap | wrap | wrap-reverse;}

- ```nowrap``` (默认): 单行显示，从左到右(和书写模式相关)
- ```wrap```: 多行显示，从左到右(和书写模式相关)
- ```wrap-reverse```: 多行显示，从左到右(和书写模式相关)。并且flex items 会反转

```flex-flow``` 属性
这是一个```flex-direction```和```flex-wrap```的简写形式。定义容器(flex container)排列方式是主轴还是侧轴和项目(flex items)是否换行。默认的是 ```row nowrap```
```css```
flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content 属性

这个属性展现了非常大的灵活性，他根据容器的剩余空间帮助项目(flex items)分配排列距离。默认的项目(flex items)沿着主轴排列(他受flex-direction的影响)。
css
.container { justify-content: flex-start | flex-end | center | space-between | space-around;}

- ```flex-start```(默认): 项目(flex items)沿着主轴起点(main-start)成一条直线排列直到到达主轴终点(main-end)
- ```flex-end```: 项目(flex items)沿着主轴终点(main-end)成一条直线排列直到到达主轴起点(main-start)
- ```center```: 项目(flex items)沿一条直线从中间向两边排列
- ```space-between```: 第一个项目和最后一个项目分别在主轴起点(main-start)和主轴的终点(main-end)其他项目平均分布在主轴(main axis)剩余的空间上
- ```space-around```: 项目均匀的分布在主轴(main axis)上，但是实际上看起来并不是均匀的。因为第一个项目和最后一个项目的左边和右边并没有其他项目的间距叠加。所有第一个和最后一个项目看起来比其他项目的空间要少一倍

```align-items``` 属性