本文介绍css3弹性布局的语法
html布局
<div class="box"> ???<div class="item">1</div> ???<div class="item">2</div> ???<div class="item">3</div></div>css写法（弹性布局默认是x轴为主轴，并且从左到右依次显示）
.box{ ???width: 100%; ???border: 1px solid #ccc; ???display: flex; // 开启弹性布局 ????flex-direction: row-reverse; // 调整显示方向为从右到左 ???/* ???????flex-direction: column; 设置主轴为y轴 ????????justify-content 设置item沿着主轴方向的的排列规则 ???????????flex-start 排在主轴开头 ???????????flex-end 排在主轴末尾 ???????????center 排在主轴中间 ???????????space-between 平均排布，两端无间隙 ???????????space-around 平均排布，两端有间隙 ???????align-items 设置item沿着副轴方向的排列规则 ???????????flex-start 排在副轴的开头 ???????????flex-end 排在副轴的结尾 ???????????center 排在副轴中间 ???????????baseline 文字基线对齐 ???????????stretch 自动拉伸item，来填充剩余空隙，这是默认值，可以设置宽高度覆盖默认值 ???????align-content: ???????????当item的宽度超过了容器的总宽度，会被压缩，可以设置 flex-flow: row wrap; 让他自动换行 ???????????此时可以使用align-content来设置多行的item的排布规则，也就是副轴的排布 ???????????设置属性和justify-content一直，只不过多了一个stretch ???????????stretch 将行的副轴占比拉伸，占据剩余空间 ???????flex-flow ?????????????这是 flex-direction 和 flex-wrap 的和写形式 ???????flex-wrap 设置自动换行 ???????????nowrap 默认值 ???????????nowrap 自动换行 ???????????wrap-reverse 调换副轴的起始位置 ???*/}.item{ ???flex: 1; // 设置item占比 ???/* ???????align-self 设置单个item的排列方式 ???????????属性值和align-items一致 ???????order 排序优先级，可以是正整数，负整数，默认都是0 ???????????例如 order: 1 ????????????越大的值，优先级越低 ???*/}小例子
让一个元素垂直水平居中.box{ ???width: 500rpx; ???height: 500rpx; ???border: 1px solid #ccc; ???display: flex;}.item{ ???width: 200rpx; ???height: 100rpx; ????margin: auto; ???background: red;}