CSS弹性布局（排列方式、项目换行、主轴对齐方式）

在弹性布局里，父元素称为容器，子元素称为项目。项目排列由容器控制，控制属性都写在容器里。要使用弹性布局，要先使父元素display:flex;

例：以下写了项目的排列方式、项目换行、项目的对齐方式

<!-- HTML -->
<div class="baba">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
  </div>

/* CSS */
.baba{
      background-color: yellowgreen;
      /* 让父元素变成flex布局 */
      display: flex;
      /* 容器属性1：主轴方向（flex-direction），就是在容器中项目的排列方式 */
      /* 默认方向，横向从左向右，左是起点~右是终点 */
      flex-direction: row;
      /* 横向从右向左，右是起点~左是终点 */
      flex-direction: row-reverse;
      /* 纵向从上向下，上是起点~下是终点 */
      flex-direction: column;
      /* 纵向从下向上，下是起点~上是终点 */
      flex-direction: column-reverse;

      /* 项目换行 */
      /* wr