和一步聊聊布局神器flexbox
本文涉及内容如下： flexbox的基本概念、容器属性学习、项目属性学习、实战演练。 flexbox 堪称布局神器，但属性实在太多让人无从下手，因此将自己所学的知识做个总结。
基本概念
flexbox是Flexible Box的缩写，译为弹性布局。flex 布局主要是让容器中的子项目可以根据配置改变自身的宽高及顺序，以最佳的方式填充容器，达到弹性的目的。容器有横轴和纵轴来划分容器，横轴默认为水平方向纵轴为垂直方向。
容器属性
容器属性用来控制布局的大方向。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
flex-direction属性决定主轴方向（即项目的排列方向）。 row | row-reverse | column | column-reverse
flex-wrap
该属性用来控制，当容器的主轴方向放不下所有项目时该如何处理。wrap | wrap-reverse | no-wrap, no-wrap 为默认值。
flex-flow
flex-flow 是 flex-direction 和 flex-wrap 两个属性的简写，你要是记不住也不必强求。默认值为row nowrap。
justify-content
justify-content定义子项目在主轴上的对齐方式。可以联想下 text-align。flex-start | flex-end | center | space-between | space-around
align-items
justify-content定义子项目在纵轴上的对齐方式。 flex-start | flex-end | center | baseline | stretch
align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
也就是说只有当 wrap生效时，该属性才有存在的意义。flex-start | flex-end | center | space-between | space-around | stretch
以上就是flex 布局所涉及的所以容器属性。下一小结，我们将共同学习项目相关属性。
项目属性
项目属性用来控制容器中的项目自身的位置和伸缩。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order
order 用来控制 flex 项目自身的摆放顺序，默认值为0，可以为负数，值越小项目越靠前摆放。
flex-grow
flex-grow控制项目的放大比例，默认为0，不放大。值得注意的是放大的比例是相对于剩余的空间而言，而不是项目自己的大小。
flex-shrink
flex-shrink 与 flex-grow 类似，主要用来控制项目的缩小比例，默认值为1，同比缩小。
flex-grow 和 flex-shrink 都是按照剩余空间进行放大缩小的，而不是自身。大家记住瘦死的骆驼比马大。flex-basis
flex-basis 很好理解，若横轴是主轴，flex-basis 可以当做 width 来使用；若纵轴是主轴，flex-basis 可以当做 height 来使用。个人感觉 flex-basis width 和 height 更灵活。
flex
flex 属性是 flex-grow flex-shrink flex-basis 三个属性的缩写。同样的原则，为了不增加大家的学习难度，不会不必强求。今天只向大家解释一下 flex: 1;当 flex的值为整数是它代表 flex-grow: 数值； flex-shrink采用默认值1；flex-basis:为0%。
.item {flex: 1;}.item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%;} 那么大家思考一下flex: 2;等同于什么？
.item {flex: 2;}.item { flex-grow: 2; flex-shrink: 1; flex-basis: 0%;} align-self
align-self控制自身在侧重的对齐方式，和容器属性 align-items 类似，当然了，优先机肯定是高于他的爸爸的。auto | flex-start | flex-end | center | baseline | stretch
以上项目的属性和练习也完成了，接下来使用 flex 布局实现我们日常工作中常见的三个需求。
实战
实现等宽布局，即使项目被删除和添加也不需要更改 css 的代码，常用来实现导航
垂直水平居中，该需求是特别常见的使用 flex 特别容易。 等高布局，当左右两个框的高度不定时，我们可以考虑使用 flex 实现。 欢迎大家指正批评、或留言。QQ群：538631558【开发环境推荐】 是基于浏览器的集成式开发环境，支持绝大部分编程语言，包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，无需下载安装程序，一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境，并且支持自定义域名指向，动态计算资源调整，可以完成各种应用的开发编译与部署。