还清楚记得第一次用Flex实现了垂直居中的时候，我那各种unbelievable的心情，然后就深深喜欢上了这个好玩的东西
flex layout
为什么出现
关于Flex布局的出现解决了的问题，个人总结了以下几点原因。
先看看到现在WEB布局的一个发展吧
布局
- 传统的布局都是基于盒模型，然后设置各种display和position，必要时再加上相应地float，想必写过CSS的同学都感受到过，实现一些复杂的布局会非常不方便，有时候自己写的样式，过段时间看都不敢相信。
- 对于一些常用的居中问题，比如垂直居中的实现，使用flex会非常简单
- 还有一些内容的伸缩，等分等问题
我觉得最主要的一点就是简化了样式的编写，同样实现一个复杂的需求，之前用CSS可能得编写一大堆代码，但是用flex可能几行就实现了
是什么
flex的全称是Flexible Box，是2009年W3C提出的一个布局概念，目的是简便、完整、响应式地实现各种页面的布局。
画了张flex从工作草案到候选的的大事年表
要注意的一点：
- 设为 flex 布局以后，子元素的
float、clear和vertical-align属性将失效 - flex布局默认是首行左对齐
概念
理解flex中有几个概念很重要，像下图，如果是用翻译，注意是侧轴，不要老说纵轴，是主轴，不要老说横轴，因为代表的意义不一样。
如何使用
使用flex很简单，只用设置display属性为flex就可以，像下面这样：
image.png
自己写了一个Demo，建议，打开demo，可边看边试，会理解的特别快，点击在线演示可修改样式
Container的属性（6个）
从概念图可以看出，flex布局有两个最大的概念也就是container和item，所以相应地所有属性也只对这两个元素起作用的，下来介绍container的属性，当然前提是container设置了display: flex
- 1. flex-direction
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
设置item排列的方向
默认是row，从主轴的起点向终点依次排列。
row-reverse: 从主轴的终点位置开始向起点依次排列。
column: 从侧轴的起点向终点依次排列。
column-reverse: 从侧轴的起点位置开始向终点依次排列。
注意设置了这个属性的item会影响tab键的顺序哦。
- 2. flex-wrap
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
设置item是否换行
默认是nowrap，不换行显示。
wrap: 一行排列显示不下的时候会自动换行显示，默认主轴从起点到终点。
wrap-reverse：一行排列显示不下的时候会自动换行显示，默认主轴从终点到起点。
- 3. flex-flow（，row nowrap）
这个是flex-direction 和 flex-wrap 属性的缩写，默认是row nowrap
就像margin和margin-left、margin-right、margin-top、margin-buttom的关系一样
- 4. justify-content
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
主轴上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可对多余的空间进行分配
- flex-start: 默认值，子元素从主轴的起点开始排列
- flex-end: 子元素从主轴的终点开始排列
- center: 子元素关于主轴的中点对齐排列
- space-between 弹性盒子元素两端对齐，其余平均地分布在行里
- space-around 弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半
- 5. align-items
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
设置元素在侧轴上的对齐方式，对单行起作用
- flex-start: 默认值，子元素从侧轴的起点开始排列
- flex-end: 子元素从侧轴的终点开始排列
- center: 子元素关于侧轴居中排列
- baseline: 子元素关于侧轴的基线对齐
- stretch: 如果不设置width和height，元素高度默认撑满父容器
- 6. align-content
堆叠伸缩行的对齐方式， 定义了多根轴线的对齐方式，项目只有一根轴线，该属性不起作用
item的属性
- 1. order
.item {
order: 0;
}
按照order的属性排列元素, 数值小的在前面，还可以是负数，默认是0
- 2. flex-grow
.item {
flex-grow: 0;
}
定义项目的放大比例, 默认是0，即父容器如果存在剩余空间，也不放大
- 所有项目的flex-grow属性都为1，则它们将等分剩余空间
- 3. flex-shrink
.item {
flex-shrink: 1;
}
- 设置弹性盒的缩小比例，默认是1
- 父容器如果空间不足以分配子元素，元素会默认缩小等分不足空间
- 可以设置item的flex-shrink的属性为0来保证该元素不会被缩小
- 4. flex-basis
定义了在分配多余空间之前，项目占据的主轴空间
如果不设置改属性，默认的main-size就是item的width或height，取决于主轴是什么
- 5. flex
- flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，后两个系数可选
- 两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
- 6. align-self
.item {
align-self: auto;
}
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性, 默认值为auto, 取值和container的align-items属性一致
浏览器的兼容性
在这里查询，可以看到已被大多数浏览器支持
网友评论