Flex布局

一、简介

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。容器被设定为Flex布局以后，子元素的float、clear、vertical-align将失效。

.box{display: flex;}

二、属性

 容器的属性6个，可以设置在box父容器上，用来控制子元素的显示方式。

属性
描述
flex-direction
设置元素的排列方向
flex-wrap
子元素超出父容器时是否换行
flex-flow
是flex-direction和lfex-wrap的简写
justify-content
元素在主轴上对齐方式
align-items
元素在交叉轴对齐方式
align-content
设置或检索弹性盒堆叠伸缩行的对齐方式

2.1、排列方式（flex-direction）

flex-direction可以改变主轴的方向，row 从左到右是主轴，从上到下是交叉轴；column从上到下是主轴，从左到右是交叉轴。

属性
描述
row
为水平方向，起始点在左边，从左到右排列（左对齐）
row-reverse
对齐方式与row相反，起始点在右边，从右向左排列，（右对齐）
column
垂直方向，起点在顶端，即纵向从上往下排列（顶对齐）
column-reverse
对齐方式与column相反，起点在底端，即纵向从下往上排列（底对齐）

.box{display: flex; flex-direction: row;}

.box{display: flex; flex-direction: row-reverse;}

.box{display: flex; flex-direction:column;}

.box{display: flex; flex-direction:column-reverse;}

2.2、flex-wrap子元素换行方式

属性
描述
nowrap
默认nowrap,父容器为单行，子元素不换行，可能会溢出
wrap
父容器可以为多行，子元素超出父容器部分，会被从新放置到下一行
wrap-reverse
与wrap相反,第一行在下边

.box{display: flex;flex-wrap: nowrap;}

.box{display: flex;flex-wrap: wrap;}

.box{display: flex;flex-wrap: wrap-reverse;}

2.3、flex-flow复合属性

 该属性是flex-direction和flex-wrap属性的简写形式。默认row nowrap。

.box{display: flex;flex-flow:row wrap;}

2.4、justify-content

属性
描述
flex-start
默认行起始位置，左对齐
flex-end

行结束位置，右对齐

center
居中，中间位置对齐
space-between
两端对齐，子元素之间间隔相等
space-around
子元素两次的间隔相等。两端的间距，是子元素之间间距一半

.box{display: flex;justify-content: flex-start;}

.box{display: flex;justify-content: flex-end;}

.box{display: flex;justify-content: center;}

.box{display: flex;justify-content: space-between;}

.box{display: flex;justify-content: space-around;}

2.5、align-items

属性描述stretch

默认值，如果子元素未设置高度或者设置为auto,将暂满整个容器高度

center交叉轴（纵轴）的中点对齐
flex-start

交叉轴（纵轴）的起点对齐

flex-end

交叉轴（纵轴）的终点对齐

baseline

子元素的第一行文字为基线对齐

.box{display: flex;align-items: stretch;}

.box{display: flex;align-items: center;}

.box{display: flex;align-items: flex-start;}

.box{display: flex;align-items: flex-end;}

.box{display: flex;align-items: baseline;}

2.6、align-content

 该属性定义了多根轴线的对齐方式，如果只有一根轴线，该属性不起作用。

属性
描述
flex-start与交叉轴的起点对齐flex-end与交叉轴的终点对齐center与交叉轴的中点对齐space-between与交叉轴两端对齐，轴线之间的间隔平均分布space-around每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍stretch轴线占满整个交叉轴

.box{display: flex;flex-wrap: wrap;align-content: flex-start;}

.box{display: flex;flex-wrap: wrap;align-content: flex-start;}

.box{display: flex;flex-wrap: wrap;align-content: center;}

.box{display: flex;flex-wrap: wrap;align-content: space-between;}

.box{display: flex;flex-wrap: wrap;align-content: space-around;}

.box{display: flex;flex-wrap: wrap;align-content: stretch;}

三、设置子元素属性

属性
描述
order默认为0 ，定义子元素排列顺序，值越小，越排在前面
flex-grow默认0，多余空间，子元素放大比例
flex-shrink默认1，空间不足，子元素缩小比例
flex-basis默认值auto，元素本来大小。计算主轴的剩余空间，设置值即为元素占据的固定空间
flex默认 0 1 auto 是flex-grow ,flex-shrink,flex-base的简写，后两个属性可选。
align-self默认auto，属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items属性

将第4个div 的order设置成-1将排在其他子元素前面。

.item{order: -1;}

flex-grow 属性值默认为0，如果值设为1将等分剩余空间，如果一个元素是2 ，其他是1，该元素占的剩余空间是其他元素一倍。下面例子中 div1 属性值为2 ，其他元素属性值为1.

.item{flex-grow:2;}

flex-shrink空间不足是缩小，默认值为1。下面列子中div值都为0，div1值设置为1 ，空间不足div1会缩小.

.item{flex-shrink:1;}

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。如果有多余的空间，flex-basis:150px,那么该元素就会被放大150的宽度

.item{flex-basis:150px;}

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 除了auto是表示继承父元素，其他的跟align-items是一样的。

.item {  align-self: auto | flex-start | flex-end | center | baseline | stretch;}

.item1{align-self:auto;}.item2{align-self:flex-start;}.item3{align-self:flex-end;}.item4{align-self:center;}.item5{align-self:baseline;}.item6{align-self:stretch;}