flex布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>flex</title>
  <style>
  .box {
    background: blue;
    display: flex;
    display: -webkit-flex;
    /* Safari */
    /* flex-flow元素的排列方式从左到右还是从右到左还是从上到下还是从下到上，空间不够时是否换行，
     换上一行还是到下一行由（row、column、wrap控制，-reverse可以倒序）默认从左到右，不换行*/
    /*元素横排从左到右排列，不够时直接到下一行*/
    flex-flow: row wrap;
    /*justify-content 左右对齐方式flex-start 左对齐| flex-end 右对齐| center 居中| 
     space-between 两端对齐| space-around  元素边距相同*/
    justify-content: flex-start;
    /* align-items flex-start | flex-end | center | baseline | stretch*/
    align-items: stretch;
  }
  .item {
    background: red;
    /* order顺序，数字越大，排列越靠后 */
    order: 0;
    /* flex 有空间时是否放大，空间不足时是否缩小，在分配多余空间之前，元素占据的
     主轴空间是否为元素大小还是自定义值。默认(0,1,auto)、auto (1 1 auto) 和 none (0 0 auto)。 */
    flex: auto;
    height: 100px;
    line-height: 100px;
    font-size: 50px;
    text-align: center;
    /* align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
    默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 */
  }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>
也可以边玩小游戏边学flex布局