css flexbox,一种弹性布局,实现页面根据宽高自动调节元素和间距的大小。

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

<style>
  .container{
    display: flex; /* inline-flex */
    /* 子元素的布局方向,是纵列式的还是横行式的,默认row */
    flex-direction: row | row-reverse | column | column-reverse;
    /* 子元素是否只能放在一行中,默认nowrap */
    flex-wrap: nowrap | wrap | wrap-reverse;
    /* 上面两个属性的缩写 */
    flex-flow: <flex-direction> | <flex-wrap>;
    /* 子元素水平对齐方式,默认flex-start */
    justify-content: flex-start | flex-end | center | space-between | space-around;
    /* 子元素垂直对齐方式,默认stretch */
    align-items:flex-start | flex-end | center | stretch | baseline;
    /* 元素整体的水平对齐方式,默认stretch */
    align-content:flex-start | flex-end | center | stretch | space-between | space-around;
  }

  .item{
    /* 元素的排序 */
    order:<ineger>;
    /* 元素对于其他元素的放大倍数,默认0*/
    flex-grow:<number>;
    /* 元素对于其他元素的缩小倍数,默认1*/
    flex-shrink:<number>;
    /* 元素最小的宽或高,默认auto*/
    flex-basis:<length> | auto;
    /* 上面几个属性的缩写 */
    flex : none| [<flex-grow> <flex-shrink>? || <flex-basis>];
    /* 元素自身垂直对齐方式 */
    align-self:auto | flex-start | flex-end | center | stretch | baseline;
  }
</style>