Flex布局

Flex布局
display:flex
Flex是Flexible Box（弹性盒子）的缩写
- Flex可用于任何容器

.box{
    display:flex;
}

• 也可以用于行内元素

.box{
    display:inline-flex;
}

• 子元素的float、clear、vertical-align属性将失效
• 子元素自动成为flex item，简称“项目”
• 默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
• 项目默认沿主轴排列，单个项目占据的主轴空间叫做（main size），占据的交叉轴空间叫做（cross size）

属性
- flex-direction：决定主轴的方向（项目的排列方向）

flex-direction:row（默认值）

主轴为水平方向，项目由左到右

flex-direction:row-reverse

主轴为水平方向，项目由右到左

flex-direction:cloumn

主轴为垂直方向，项目由上到下

flex-direction:cloumn-reverse

主轴为垂直方向，项目由下到上
- flex-wrap

flex-wrap:nowrap(默认）

项目沿主轴排列时不换行

flex-wrap:wrap

换行，第一行在上方

flex-wrap:wrap-reverse

换行，第一行在下方
- flex-flow
flex-flow是flex-direction和flex-wrap的简写形式，默认值为row nowrap
- justify-content： 定义了项目在主轴的对齐方式
flex-star（默认值）从左开始
flex-end从右开始
center居中
space-between两端对齐，项目间间隔相等
space-around项目两侧间隔相等，项目间的距离相当于2倍的距离间隔


- align-items： 定义项目在交叉轴上对齐方式
flex-star交叉轴起点对齐
flex-end交叉轴终点对齐
center交叉轴中点对齐
baseline以项目第一行文字为基线对齐
stretch（默认值）如果项目没设高度或auto，将占满整个容器的高度


- align-content： 定义了多根轴线的对齐方式，若项目只定义了一根轴线，则该属性无效
flex-star交叉轴起点对齐
flex-end交叉轴终点对齐
center交叉轴中点对齐
space-between与交叉轴两端对齐，轴线之间间隔平均分配
space-around每根轴线两侧间隔相等，轴线间的距离相当于2倍的距离间隔
stretch（默认值）轴线占满整个交叉轴
项目（flex item即子元素）的属性
- order： -定义项目的排列顺序
数值越小排列越前，默认为0
- flex-grow： 定义项目的放大比例，默认为0，数值及放大倍数
默认都为0的时候，即使存在剩余空间也不占据
都为1的时候，如果存在剩余空间则均等占据剩余空间
若A项目数值为2，其余项目数字为1的时候，则A项目的占据剩余空间是其它项目的2倍
- flex-shrink： 定义了项目的缩放比例，
默认值为1
默认为1的时候，若空间不足，该项目缩小
都为1的时候，若空间不足，所有项目缩小
若A项目数为0，其余项目为1的时候，若空间不足，A项目不缩小，其余项目缩小
- flex-basis： 定义了在分配多余空间之前，项目占据的主轴空间
默认为auto，即项目原本大小
- flex
flex是flex-grow、flex-shrink和flex-basis的缩写，默认为0，1，auto。后两个属性可选
有2个快捷值：auto（1，1，auto）和none（0，0，auto）
建议优先写这个属性，因为浏览器会推算相关值
- align-self
允许使用该属性的项目有自己的对齐方式，会覆盖align-items属性
默认为auto，继承父元素的align-items属性，若无父元素，则等同于stretch
除了多加的auto，属性与align-items一样

以上文章主要摘自阮一峰的《Flex布局：语法篇》