css3弹性布局语法全解

本文介绍css3弹性布局的语法

1. html布局

   <div class="box">
       <div class="item">1</div>
       <div class="item">2</div>
       <div class="item">3</div>
   </div>
   

2. 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
               越大的值，优先级越低
       */
   }
   

3. 小例子

   让一个元素垂直水平居中
   .box{
       width: 500rpx;
       height: 500rpx;
       border: 1px solid #ccc;
       display: flex;
   }
   .item{
       width: 200rpx;
       height: 100rpx;
       margin: auto;
       background: red;
   }