css之flex布局

html

<ul class="list">
    <li>111111</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

css

 * {
          margin: 0;
          padding: 0;
          list-style: none;
      }
      .list {
          height: 400px;
          border: 5px solid #555;
          /*
              display: flex:
                  开启弹性布局
              flex: 1;
                    均分宽度
            */
          display: flex;
          /*
              flex-direction:
                  水平方向，起点在左端|水平方向，起点在右端|垂直方向，起点在上沿|垂直方向，起点在下沿
                  row | row-reverse | column | column-reverse;
          */
          flex-direction: column;
            /*
                  justify-content:    主轴方向对其方式 默认值左对齐
                    左对齐|      右对齐|     居中|     两端对其，项目之间间隔相等|  每个项目两侧的间隔相等
                    flex-start | flex-end | center | space-between | space-around;
            */
            justify-content: center;
            /*
                align-items:        和主轴交叉方向对齐方式，
                    起点对齐|     终点对齐|   中点对齐|  基线对齐|  默认值
                    flex-start | flex-end | center | baseline | stretch;
            */
            align-items: center;
        }
        .list li {
            height: 40px;
            flex: 1;

        }
        .list li:nth-child(1) {
            background-color: #00a3ed;
        }
        .list li:nth-child(2) {
            background-color: #9198e5;
        }
        .list li:nth-child(3) {
            background-color: #e66465;
        }
        .list li:nth-child(4) {
            background-color: #9198e5;
        }
        .list li:nth-child(5) {
            background-color: #00a3ed;
        }

补充：
flex布局有一个很重要的属性给漏了
flex-wrap 这个属性有三个可选值分别是
nowrap：默认值，flex元素将被排在一行
wrap：flex元素将被排在多行
wrap-reverse：和 wrap 的行为一样，但是 cross-start 和 cross-end 互换