在排页面中 我们可以应用到很多布局：
如：双飞翼、多栏、弹性、流式、瀑布流、响应式布局
今天我们就来简单地说一下弹性布局
1.flex布局是什么？
是弹性布局，为盒装模型提供最大的灵活度。
任何一个容器都可以作为弹性盒。
.box{
display: flex;
}
行内元素有也可以使用弹性盒布局
.box{
display: inline-flex;
}
Webkit 内核的浏览器，必须加上-webkit前缀
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
写了弹性盒布局，浮动啥的都不能用；
2.基本属性
如果父级元素设置了弹性盒子，那么它的子元素都是都跟随父级。
3.父级的属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1.flex-direction决定主轴的方向，排列方向
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
四个属性：
row（默认值）：主轴为水平方向，起点在左端。→
row-reverse：主轴为水平方向，起点在右端。←
column：主轴为垂直方向，起点在上沿。↑
column-reverse：主轴为垂直方向，起点在下沿。↓
2.flex-wrap如果一条轴线排不下，如何换行
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
有三个值
nowrap 不换行，都在一行显示。
wrap 换行，第一行在上面，多出来的排到下面
wrap-reverse 换行，调换位置
3.flex-flow 是flex-dirextion和flex-wrap的缩写，默认值为row-nowrap；
.box {
flex-flow: || ;
}
4.justify-content定义了在主轴上面的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 平铺盒子 平分留白空间
space-around 平铺盒子 左右有留白
5.align-items在交叉轴上如何对齐
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
5个属性
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6.align-content很多轴线的对齐方式 如只有一根线 不起作用
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
6个属性
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
写在项目属性上的
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1.order排列顺序 数越小越靠前
2.flex-grow放大比例 如果都为1则平分空间 如果有一个为2 那么2分到的空间大一点
3.flex-shrink如果项目属性为1时 在空间不足时，会等比例缩小，其中有一是0 别的都是1 那么在空间不足时，0不缩放；
4.flex-basis
5.flex 可以写三个属性
6.align-self
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
希望我的理解可以给你们提供一些帮助，学识有限，如果有地方出现错误或者有更好的方法去实现，欢迎私信！