任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
行内元素也可以使用flex布局
.box{
display: inline-flex;
}
webkit内核的浏览器必须加上前缀-webkit
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
++设置flex布局之后，子元素的clear，float，vertical-align属性将失效++
容器的六个属性
1.flex-direction
决定主轴的方向，即项目的排列方向
.box{
flex-direction:row
}
值：
row：从左到右，起点在左端
row-reverse：从右到左，起点在右端
column：从上到下，起点在上沿
column-reverse：从下到上，起点在下沿
2.flex-wrap
默认情况下，项目都排在一条直线上(又称“轴线”)。flex-wrap定义如果一条轴线排不下，如何换行
.box{
flex-wrap:nowrap|wrap|wrap-reverse
}
值：
nowrap：不换行(默认，即使子元素的宽度或者高度大于父元素的宽度或者高度，也在一行显示)
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
3.flex-flow
flex-flow是flex-direction和flex-wrap的简写形式，默认值为row nowrap
.box{
flex-flow:
}
4.justify-content
定义项目在主轴上的对齐方式
.box{
justify-content:flex-start;
}
值：
flex-start：(默认)左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间将各相等
space-around：每个项目的两侧间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
5.align-items
定义项目在交叉轴上的对齐方式
.box{
align-items:flex-start;
}
值：
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴中点对齐
baseline：项目的第一行文字基线对齐
stretch：(默认值)，若项目没有设置高度或设置为auto，将占满整个容器的高度
6.align-content
定义了多根轴线的对齐方式。若项目只有一根轴线，则不起作用
.box{
align-content:flex-start
}
值:
flex-start:起始端对齐
flex-end：末尾段对齐
space-between：等间距均匀分布，与交叉轴两端对齐，轴线之间的间隔平均分布。
center：居中对齐
space-around：等边距均匀分布，每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch：拉伸对齐
项目属性
1.order属性
定义排列顺序，数值越小越靠前，默认为0
.item{
order:;
}
2.flex-grow
定义项目放大比例，默认为0，即如果存在剩余空间，也不放大
.item{
flex-grow:;
}
3.flex-shrink
定义缩小比例。默认为1，如果空间不足，项目将缩小。
4.flex-basis
设置基准大小
表示在不伸缩的情况下子元素的原始尺寸。
定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item{
flex-basis:|auto
}
它可以设为跟width或height属性一样的值(比如350px)，则项目将占据固定空间。
5.flex
flex是flex-grow，flex-shrink，flex-basis的简写形式
默认：0 1 auto
快捷键：auto(1 1 auto)和none(0 0 auto)
6.align-self
允许有单个项目和其他项目不一样的对齐方式
可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item{
align-self:auto|flex-start|flex-end|center|baseline|stretch
}
如：
标签：box,flex,auto,align,布局,wrap,对齐,CSS
来源： /Glichi/article/details/95656806
