CSS常见属性（三）

1.弹性布局

        （1）弹性布局，其实就是浏览器根据参数自动计算元素的位置和尺寸

        （2）注意标签的关系属于父子关系

        （3）把父元素设置成弹性盒子，可以自由控制子元素的位置和尺寸

        （4）弄清楚哪些属性是给父元素设置，哪些属性是给子元素设置的

        （5）设置弹性盒子基本步骤（父元素）：

                【1】把元素设置成弹性容器：display: flex;

                【2】设置子元素在主轴row或者侧轴column方向：flex-direction: row;

                【3】设置子元素在主轴方向上的位置（居中，开始位置，结束位置，两端对齐等）展示：justify-content

• • • • justify-content：flex-start

• • • • justify-content：flex-end

• • • • justify-content：center

• • • • justify-content：space-around

• • • • justify-content：space-between

• • • • justify-content：space-evenly

                【4】设置子元素在侧轴方向上的位置（居中，开始位置，结束位置）展示：align-items

• • • • align-items: center

• • • • align-items: flex-start

• • • • align-items:flex-end

        （6）（父元素）设置换行：设置超出部分的子元素换行

                        flex-wrap: wrap （换行）

                        flex-wrap: nowrap（不换行）

        （7）（父元素）设置元素在侧轴方向的位置(和换行一起使用)：align-content

                        align-content: flex-start | center | flex-end

.row {
      width: 400px;
      height: 200px;
      background-color: #ccc;
      /* 父元素 */
      display: flex;
      /* 设置超出部分的子元素换行 */
      flex-wrap: wrap;
      /* 设置子元素在垂直方向的位置（换行） */
      align-content: flex-start;
    }

 .row {
      width: 400px;
      height: 200px;
      background-color: #ccc;

      /* 父元素 */
      display: flex;
      /* 设置超出部分的子元素换行 */

      flex-wrap: wrap;
      /* 设置子元素在垂直方向的位置（换行） */
      align-content: center;
    }

.row {
      width: 400px;
      height: 200px;
      background-color: #ccc;

      /* 父元素 */
      display: flex;
      /* 设置超出部分的子元素换行 */

      flex-wrap: wrap;
      /* 设置子元素在垂直方向的位置（换行） */
      align-content: center;
      /* 设置子元素在水平方向的位置 */
      justify-content: space-evenly;
    }

        （8）（子元素）中设置的属性：

                【1】flex-grow   扩大

                        flex-grow: 1

                        flex-grow: 1、flex-grow: 2、flex-grow: 3

                【2】flex-shrink  收缩

                        flex-shrink:0; 表示不收缩

                【3】flex-basis   设置尺寸：水平方向的尺寸

                【4】order  设置元素渲染的先后顺序：order属性值越小，就越先渲染出来。

                【5】align-self 设置元素在侧轴方向的位置