Flex布局
1、概念
在弹性布局中，有两根轴线：
水平方向的主轴
垂直方向的交叉轴
Flex布局分项目与容器。 容器指的就是弹性盒本身。项目指的是内部的子元素。
2、容器属性
容器属性指的是放在容器选择器样式列表中的属性。
display: flex;
拥有该属性的元素就是容器。
当该元素拥有该属性时，子元素的float、vertical等属性都将失效。子元素就是项目。所有的项目按照主轴的方向排列成一排。
结构如下：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
给ul添加属性:
ul {
display: flex;
}
2.1 flex-direction
该属性决定主轴的方向: 默认是row
可选值有： row、 column、 row-reverse、 column-reverse
row：默认值，水平从左到右排列
row-reverse: 水平从右到左排列
column：垂直 从上到下排列
column-reverse：垂直 从下到上排列
row:
column:
row-reverse:
column-reverse:
2.2 flex-wrap
该属性用于决定容器内的项目是否换行，以及如何换行
可选值： nowrap、wrap、wrap-reverse
nowrap 不换行
wrap 换行 往下排列
wrap-reverse 换行 往上排列
nowrap:
容器宽度800，项目宽度200。因为容器的换行属性是nowrap（默认值）所以导致项目的宽度变为160.
wrap：
新的内容出现在第一行下方
wrap-reverse:
2.3 justify-content
该属性决定项目在容器的主轴上的排列方式
可选值： flex-start flex-end center space-between space-around space-evenly
flex-start (默认值) 靠左
flex-end 靠右
center 居中
space-between 开头的项目与结尾的项目是贴边的 中的空白平分
space-around 每一个项目的左右空白距离相等
space-evenly 每一个空白都相等
flex-start:
flex-end:
center:
space-between:
space-around:
2.4 align-items
该属性决定项目在容器中的垂直方向的对齐
可选值: stretch flex-start flex-end center baseline
stretch 默认值 上贴顶 下贴底
flex-start 贴顶
flex-end 贴底
center 居中
baseline 文本基线对齐
stretch: 在没有高度时才会生效
flex-start:
flex-end:
center:
baseline:
2.5 align-content
当有多根轴线时才会生效，决定多根轴线在容器中的排列方式
可选值： stretch flex-start flex-end center space-around space-between
stretch 默认值 表示填满
flex-start 贴顶
flex-end 贴底
center 居中
space-around 每一个轴线的空白距离相等
space-between 第一根轴线 贴顶 最后一根轴线 贴底 平分空白
stretch:
flex-start
flex-end:
center:
space-around:
space-between:
space-evenly:
3 项目属性
3.1 flex-grow
该属性决定项目的放大比例。
放大规则： 先计算容器宽度，再计算每一个项目的width、flex-basis、内容宽之和。剩余的部分按照每一个项目的flex-grow之和平分。每一个项目占自己的flex-grow值份。
demo:
没有flex-grow时的值
给第一个项目加flex-grow: 1
800 - 600之后，剩余200, 再查看每一个项目的flex-grow之和发现只有第一个拥有，此时由第一个项目占据剩余的200.
3.2 flex-shrink
该值决定缩小比例
计算规则： 计算容器宽度A，计算所有项目的实际宽度之和B，如果B大于A。此时flex-shrink属性生效。
(B - A) / 所有项目的flex-shrink属性之和 = C。 就是shrink值为1所应当缩小的值。再每一个项目就缩小shrink值*C
demo:
3.3 flex-basis
该属性决定项目所占宽度优先于width与内容
优先级: flex-basis > width > 内容宽
demo:
li {
flex-basis: 100px;
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
box-sizing: border-box;
border: 1px solid orange;
}
3.4 flex
该属性是一个融合属性 分别表示 flex-grow flex-shrink flex-basis
flex: 0 1 auto; 后两个属性可以省略
等价于
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
3.5 order
该属性决定项目在容器中的排列顺序
默认值是1 越小越靠前
3.6 align-self
该属性决定项目在容器中的垂直方向的对齐方式，会覆盖父容器的align-items。
可选值： stretch flex-start flex-end center baseline
stretch 默认值 上贴顶 下贴底
flex-start 贴顶
flex-end 贴底
center 居中
baseline 文本基线对齐
以上就是本人对flex的整理，有漏的地方，@me。
upup！认真对待每一天！