Day06：Flex 布局

目标：熟练使用 Flex 完成结构化布局

一、标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

二、浮动

1、基本使用

作用：让块元素水平排列。

属性名：float

属性值

left：左对齐
right：右对齐

<style>
  /* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */
  .one {
    width: 100px;
    height: 100px;
    background-color: brown;

    float: left;
  }

  .two {
    width: 200px;
    height: 200px;
    background-color: orange;

    float: right;
  }
</style>
<body>
  <div class="one">one</div>
  <div class="two">two</div>
</doby>

特点：

浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
浮动后的盒子脱标，不占用标准流的位置

练习，使用浮动完成下图布局：

在这里插入图片描述

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .product {
      margin: 50px auto;
      width: 1226px;
      height: 628px;
      background-color: pink;
    }

    .left {
      float: left;
      width: 234px;
      height: 628px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 978px;
      height: 628px;
      background-color: brown;
    }

    .right li {
      float: left;
      margin-right: 14px;
      margin-bottom: 14px;
      width: 234px;
      height: 300px;
      background-color: orange;
    }

    /* 细节：如果父级宽度不够，浮动的盒子会掉下来 */
    /* 第四个li和第八个li 去掉右侧的margin */
    .right li:nth-child(4n) {
      margin-right: 0;
    }
  </style>
</head>

<body>
  <!-- 版心：左右，右面：8个产品 → 8个 li -->
  <div class="product">
    <div class="left"></div>
    <div class="right">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</body>

三、清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）。

1、脱标场景

要求，完成下图界面的布局：

在这里插入图片描述

如果使用浮动布局，并且父级没有设置高度（布局错乱情况）：

<head>
  <style>
    .father {
      margin: 10px auto;
      width: 1200px;
      /* 父级没有设置高度， 子级 left 和 right 的 div 并不能撑开父级的高度 */
      /* height: 300px; */
      background-color: pink;
    }

    .left {
      float: left;
      width: 200px;
      height: 300px;
      background-color: skyblue;
    }

    .right {
      float: right;
      width: 950px;
      height: 300px;
      background-color: orange;
    }

    .bottom {
      height: 100px;
      background-color: brown;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>

在这里插入图片描述

运行效果如上图，页面布局错乱。因为父级 father 没有设置高度，子级 left 和 right 采用浮动布局，并不能撑开父级的高度，系统认为 father 的高度就是 0，所以 bottom 的显示没有紧接着 father，而是从顶部开始，导致界面布局错乱。

2、解决办法

额外标签法

在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both 。

<style>
/* 之前代码不变，这里不再重复书写  */

/* 额外标签法，解决浮动脱标的问题  */
.clearfix {
  clear: both;
}
</style>

<div class="father">
  <div class="left"></div>
  <div class="right"></div>
  <div class="clearfix"></div>
</div>

单伪元素法

（1）准备 after 伪元素

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

（2）父级使用 clearfix 类

<div class="father clearfix"></div>

细看，单伪元素法的本质和额外标签法一样，在父级内容的最后添加一个（伪）元素，并设置关键代码clear: both。

双伪元素法（推荐）

（1）准备 after 和 before 伪元素

/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

/* after 清除浮动 */
.clearfix::after {
  clear: both;
}

（2）父级使用 clearfix 类

<div class="father clearfix"></div>

使用双伪元素法，不但解决了浮动脱标的问题，还解决了外边距塌陷的问题（外边距塌陷问题在Day05有讲解）。

overfow 法

父级元素的 CSS 添加 overflow: hidden 属性，也可以解决浮动脱标的问题。

.father {
  margin: 10px auto;
  width: 1200px;
  /* height: 300px; */
  background-color: pink;

  overflow: hidden;
}

overflow: hidden 的意思是：子级超过父级高度的部分，不显示。前面讲过，浮动脱标的根本原因是：父级没设置高度，子级浮动布局又没办法撑开父级的高度，页面布局就会产生错乱。但是设置了这个属性之后，系统会在子级布局完成之后，再次检查父级的高度，如果前面没有设置父级的高度，系统就会默认将子级高度设置为父级的高度，父级有了高度，脱标问题就解决了。

四、Flex 布局

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

1、Flex组成

设置方式：给父元素（即弹性容器）设置 display: flex，子元素可以自动挤压或拉伸。

组成部分：

弹性容器，指外面的大容器，即父元素
弹性盒子，指里面的小盒子，即容器里面的每一个子元素 item
主轴：默认在水平方向，可以修改为垂直方向
侧轴 / 交叉轴：和主轴垂直的轴，默认在垂直方向，修改主轴，侧轴跟着变化

在这里插入图片描述

2、主轴对齐方式

设置方式：给弹性容器添加 justify-content 属性，用于设置弹性容器在主轴方向上的对齐方式。

属性名：justify-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧，盒子之间间距是两侧的2倍
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

3、侧轴对齐方式

设置方式：给弹性容器添加 align-items 或 align-self 属性，用于设置弹性容器在侧轴方向上的对齐方式。

属性名：align-items 或 align-self

align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器，弹性盒子在侧轴方向没有尺寸才能拉伸
center	弹性盒子沿侧轴居中排列
flex-star	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

4、修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

设置方式：给弹性容器添加 flex-direction 属性，修改弹性容器的主轴方向，侧轴方向随主轴的改变而改变。

属性名：flex-direction

属性值	效果
row	水平方向，从左向右
colum	垂直方向，从上向下
row-reverse	水平方向，从右向左
colum-reverse	垂直方向，从下向上

5、弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

<head>
  <style>
    /* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸 */
    .box {
      display: flex;
      /* 主轴为垂直方向 */
      flex-direction: column;

      height: 300px;
      border: 1px solid #000;
    }

    .box div {
      height: 100px; 
    }

    .box div:nth-child(1) {
      /* colum 垂直方向, width 就是侧轴方向, 如果不设置, 默认拉伸 */
      width: 200px;
      background-color: pink;
    }

    .box div:nth-child(2) {
      /* 弹性伸缩比 1, 占剩余的 1 份*/
      flex: 1;
      background-color: yellow;
    }

    .box div:nth-child(3) {
       /* 弹性伸缩比 2, 占剩余的 2 份*/
      flex: 2;
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

在这里插入图片描述

6、弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-wrap

属性值

wrap：换行
nowrap：不换行（默认）

<head>
  <style>
    .box {
      display: flex;
      /* 注释掉换行代码，默认不换行  */
      /* flex-wrap: wrap; */

      height: 200px;
      border: 1px solid #000;
    }

    .box div {
      margin-right: 10px;
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
  </div>
</body>

在这里插入图片描述

7、行内对齐方式

设置方式：给弹性容器添加 align-content 属性，设置侧轴上的子元素的排列方式，多行时才生效，所以要设置换行属性 flex-wrap: warp 。

理解：将一行看做一个整体，作为一个子项，设置每一行（子项）在侧轴方向的排列方式。下面提到的子项指的是一行。

属性名：align-content

属性值	说明
flex-start	默认值，子项从侧轴的头部开始排列
flex-end	子项从侧轴的尾部开始排列
center	子项在侧轴中间显示
space-around	子项行沿侧轴均匀排列，空白间距均分在子项两侧，子项之间的间距是两侧的2倍
space-between	子项沿侧轴先分布在两头，再平分剩余空间
space-evenly	子项沿侧轴均匀排列，平分剩余空间，子项之间的间距和两侧相等
stretch	子项没设置高度时，子项高度平分父元素高度

这个属性可能很多人不好理解，因为是将一行看做一个子项，在侧轴方向上的排列方式。这一行里面包含了很多个弹性盒子。

通过几个例子，理解这个属性：

<head>
  <style>
    .box {
      display: flex;
      /* 必须换行, 单行的 align-content 属性无效 */
      flex-wrap: wrap;
      height: 400px;
      border: 1px solid #000;

      align-content: flex-start;

      /* align-content: flex-end; */

      /* align-content: center; */

      /* align-content: space-between; */

      /* align-content: space-around; */

      /* align-content: space-evenly; */

      /* align-content: stretch; */
    }

    .box div {
      width: 200px;
      /* 测试 stretch 时, 不需要设置高度 */
      /* height: 100px; */
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
</body>