06 - Flex 布局

标准流 Normal Flow

标准流是浏览器渲染 HTML 元素的默认布局方式。
元素在标准流中按照其在 HTML 文档中出现的顺序自上而下排列，块级元素会独占一行，而行内元素则按照从左到右的顺序排列。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        margin: 10px;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </body>
</html>

浮动 float

浮动（Float）是 CSS 中的一种定位方式，用于控制元素在父元素内部的位置。
通过浮动，元素可以从正常的文档流中脱离出来，漂浮在其父元素的左侧或右侧。
浮动最初是为了实现文字环绕图片等布局而引入的。
影响与应用：
- 文字环绕： 浮动在过去常用于实现文字环绕图片的布局。文字会环绕浮动元素，使页面看起来更加有趣。
- 多列布局： 使用浮动可以将内容分为多列，类似于报纸的排版。但需要注意处理好列的高度，以避免布局混乱。
- 导航栏布局： 在早期，浮动常被用来创建水平导航栏，但现在更推荐使用 Flexbox 或 Grid 来实现更灵活的导航布局。
- 图片库： 浮动还可以用于创建图片库等网格布局，但同样需要注意处理元素高度以避免布局错乱。
- 清除浮动： 当浮动元素脱离了正常文档流，可能导致父元素无法正确计算高度，从而影响布局。为了解决这个问题，通常需要在父元素或浮动元素后面添加清除浮动的元素，或者使用 clear 属性。
注意事项：
- 现代布局技术： 尽管浮动在一些场景下仍有用，但现代布局技术如 Flexbox 和 Grid 更加强大且灵活，建议优先考虑使用它们来实现复杂的布局。
- 清除浮动： 使用浮动时，要特别注意清除浮动以避免父元素高度塌陷的问题。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .left {
        float: left;
        width: 150px;
        height: 150px;
        background-color: red;
        margin: 10px;
      }

      .right {
        float: right;
        width: 150px;
        height: 150px;
        background-color: blue;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="left"></div>
    <div class="right"></div>
  </body>
</html>

浮动基本使用与布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浮动的基本使用</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .product {
        width: 1226px;
        height: 614px;
        margin: 50px auto;
        /* border: 1px solid #000; */
      }

      .product__left {
        width: 234px;
        height: 100%;
        background-color: skyblue;
        float: left;
      }

      .product__right {
        width: 978px;
        height: 100%;
        float: right;
      }

      .product__right ul {
        list-style: none;
      }

      .product__right ul li {
        width: 234px;
        height: 300px;
        background-color: orange;
        margin: 0 14px 14px 0;
        float: left;
      }

      .product__right ul li:nth-child(4n) {
        margin-right: 0;
      }
    </style>
  </head>

  <body>
    <div class="product">
      <div class="product__left"></div>
      <div class="product__right">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </body>
</html>

京东布局练习

考拉布局练习

浮动的问题 - 高度塌陷

由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）
清浮动的目的是：让父元素计算总高度的时候，把浮动子元素的高度算进去
如何清除浮动呢？使用 clear 属性

清除浮动 clear

MDN 文档

clear 属性是做什么的呢？
clear 属性可以指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面;
clear 的常用取值
- left：要求元素的顶部低于之前生成的所有左浮动元素的底部
- right：要求元素的顶部低于之前生成的所有右浮动元素的底部
- both：要求元素的顶部低于之前生成的所有浮动元素的底部
- none：默认值，无特殊要求
那么我们可以利用这个特性来清除浮动。

备注

如果一个元素里只有浮动元素，那它的高度会是 0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做 clearfix，即 clear 一个不浮动的 ::after 伪元素。

#container::after {
  content: "";
  display: block;
  clear: both;
}

清除浮动塌陷

MDN 文档

清除浮动 - 学习 Web 开发 | MDN (mozilla.org)

方法一：给父元素设置固定高度
- 扩展性不好（不推荐）
方法二：在父元素最后增加一个空的块级子元素，并且让它设置 clear: both;
- 会增加很多无意义的空标签，维护麻烦
- 违反了结构与样式分离的原则（不推荐）

方法三：给父元素添加一个伪元素 ::after 伪元素

推荐;
编写好后可以轻松实现清除浮动;
纯 CSS 样式解决，结构与样式分离（推荐）

<!-- 浮动元素父元素添加 clear-fix 类名 -->
<div class="demo clear-fix">
  <!-- 浮动元素... -->
</div>

.clear-fix::after {
  content: ""; /* 伪元素必须有内容，否则不会显示 */
  display: block; /* 伪元素默认是行内元素，需要设置为块级元素 */
  clear: both; /* 清除浮动 */

  /* 以下两个属性是为了兼容 IE6/7 */
  height: 0;
  visibility: hidden;
}

.clear-fix {
  *zoom: 1; /* 触发 hasLayout(兼容 IE6/7) */
}

浮动总结

清除浮动的方法：

使用空的块级元素（常用方法）： 在浮动元素后面添加一个空的块级元素，给它应用 clear: both; 属性。这个空元素会插入到浮动元素后面，强制父元素包含浮动元素。
使用 clear 属性： 可以直接在需要清除浮动的元素上应用 clear: both;，使其不受浮动元素的影响。这种方法适用于在浮动元素后紧接着需要清除浮动的情况。
使用 overflow 属性： 将父元素的 overflow 属性设置为 auto 或 hidden，可以使其包含浮动元素。但要注意，这可能导致内容溢出时的滚动条。
使用 clearfix 类： 在父元素上应用 clearfix 类，该类会通过伪元素清除浮动，从而解决高度塌陷问题。

flex 布局

DOCS

Flexbox 翻译为弹性盒子：
- 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ;
- 元素可以膨胀以填充额外的空间，收缩以适应更小的空间;
- 通常我们使用 Flexbox 来进行布局的方案称之为flex 布局 (flex layout);
flex 布局是目前 web 开发中使用最多的布局方案：
- flex 布局（Flexible 布局，弹性布局）;
- 目前特别在移动端可以说已经完全普及;
- 在PC 端也几乎已经完全普及和使用，只有非常少数的网站依然在用浮动来布局;
为什么需要 flex 布局呢？
- 长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。
- 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举;
原先的布局存在的痛点
- 比如在父内容里面垂直居中一个块内容。
- 比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用。
- 比如使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。
flexbox 在使用时，我们最担心的是它的兼容性问题：我们可以在 Can I use... Support tables for HTML5, CSS3, etc 上查询到具体的兼容性。

flex 布局简介

Flexbox，全称为 Flexible Box Layout，是一种用于在容器内创建灵活的、一维的布局模型的 CSS 布局技术。它使得元素能够轻松地改变大小、顺序和对齐方式，适用于构建复杂的页面布局和组件。
Flexbox 的目标是提供一种更可预测的、可靠的布局方式，尤其适用于构建响应式设计和移动设备优化的界面。
Flexbox 的基本概念：
- 容器与项目： Flexbox 布局始于容器（父元素），容器内包含一组项目（子元素）。容器通过设置 display: flex; 或 display: inline-flex; 来启用 Flexbox 布局。
- 主轴与交叉轴： Flexbox 布局中有两个重要的轴：主轴（main axis）和交叉轴（cross axis）。主轴是项目排列的主要方向，交叉轴垂直于主轴。
- 项目属性： 项目是容器内的子元素。通过设置容器的 flex-direction 属性，可以决定项目在主轴上的排列方式。项目可以通过一系列的属性来控制大小、顺序和对齐方式。
- 主轴对齐与交叉轴对齐： 容器可以通过设置 justify-content 属性来控制项目在主轴上的对齐方式，通过设置 align-items 属性来控制项目在交叉轴上的对齐方式。
- 项目顺序： 通过设置项目的 order 属性，可以改变项目在容器内的顺序。

flex 布局组成

当元素表现为 flex 容器时，它们沿着两个轴来布局：在从左到右的语言中，三个 flex item 项并排放置在 flex 容器中。
主轴（main axis）是——弹性容器布置 flex 方向上的轴——是水平的。主轴的两端是开始端和结束端，分别位于左侧和右侧。
交叉轴（cross axis）是垂直的；垂直于主轴。交叉轴的开始端和结束端分别位于顶部和底部。
flex item 项沿着主轴排列，在这种情况下，宽度称为主轴尺寸，flex 项沿交叉轴排列，在这种情况下，高度称为交叉尺寸。

主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素被称之为 flex 容器（flex container）。
在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项（flex item）。

两个重要的概念：
- 开启了 flex 布局的元素叫 flex container
- flex container 里面的直接子元素叫做 flex item
当 flex container 中的子元素变成了 flex item 时，具备一下特点：
- flex item 的布局将受 flex container 属性的设置来进行控制和布局;
- flex item不再严格区分块级元素和行内级元素;
- flex item默认情况下是包裹内容的，但是可以设置宽度和高度;
设置 display 属性为 flex 或者 inline-flex 可以成为 flex container
- flex：flex container 以 block-level 形式存在
- inline-flex：flex container 以 inline-level 形式存在

主轴对齐方式 justify-content

MDN 文档

justify-content - CSS：层叠样式表 | MDN (mozilla.org)

justify-content 属性用于设置弹性容器中子元素在主轴上的对齐方式。它可以设置弹性容器中子元素在主轴方向上的对齐方式，如左对齐、居中对齐或右对齐等。
- flex-start：默认值。子元素靠左对齐。
- flex-end：子元素靠右对齐。
- center：子元素居中对齐。
- space-between：子元素平均分布在容器中，两端不留空隙。
- space-around：子元素平均分布在容器中，两端留有空隙。
- space-evenly：子元素平均分布在容器中，包括两端都留有空隙。

侧轴对齐方式 align-items/align-self

MDN 文档

align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
- stretch：默认值，项目将被拉伸以适应容器的高度（在 flex 容器中）或宽度（在 grid 容器中）。这意味着项目将沿着交叉轴占据整个容器的高度或宽度。
- flex-start：项目在交叉轴的起始边缘对齐。
- flex-end：项目在交叉轴的结束边缘对齐。
- center：项目在交叉轴上居中对齐。
- baseline：项目在基线上对齐。基线是项目内文本的基线。
- initial：将属性重置为其初始值。
- inherit：继承父元素的属性值。
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
- align-self 属性用于控制弹性项在交叉轴上的对齐方式，可以覆盖弹性容器的 align-items 属性。
- align-self 属性可以应用于每个弹性项上，它的取值和 align-items 属性相同，包括 flex-start、flex-end、center、baseline 和 stretch。
- 如果在弹性项上设置了 align-self 属性，它将覆盖弹性容器的 align-items 属性，否则弹性容器的 align-items 属性将决定弹性项在交叉轴上的对齐方式。
- 需要注意的是，如果弹性项未设置 align-self 属性，则弹性容器的 align-items 属性将应用于所有弹性项。
举个例子，如果你有一个垂直方向上的 flex 容器，而它包含了三个项目，那么 align-items 属性将决定这三个项目在容器内的垂直对齐方式。
- 如果你将 align-items 设置为 flex-start，那么所有项目都将沿着容器的顶部对齐。
- 如果你将其设置为 flex-end，则所有项目都将沿着容器的底部对齐。
- 如果你将其设置为 center，则所有项目都将沿着容器的垂直中心线对齐。

修改主轴方向 flex-direction

MDN 文档

flex-direction - CSS：层叠样式表 | MDN (mozilla.org)

flex-direction 用于定义 flex container 中子元素 (flex items) 的排列方向。
flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布
flex-direction 决定了 main axis 的方向，有 4 个取值：
- row: Flexbox 项将从左到右排列（默认值）。
- row-reverse: Flexbox 项将从右到左排列。
- column: Flexbox 项将从上到下排列。
- column-reverse: Flexbox 项将从下到上排列。

弹性换行 flex-wrap

MDN 文档

flex-wrap - CSS：层叠样式表 | MDN (mozilla.org)

flex-wrap 属性是用来控制 flex 容器中 flex 子项的换行规则的，决定了 flex container 是单行还是多行。它有以下几个取值：
- nowrap：默认值，表示所有 flex 子项都在一行内排列，如果子项太多超过了容器的宽度，它们会被缩小以适应容器。
- wrap：当容器宽度不够放下所有子项时，这些子项会被分成多行。它们将从容器的顶部开始排列，并在下一行继续排列。
- wrap-reverse：与 wrap 相同（对比 wrap，cross start 与 cross end 相反），但是子项会从容器的底部开始排列，并在上一行继续排列。

行对齐方式 align-content

MDN 文档

align-content - CSS：层叠样式表 | MDN (mozilla.org)

align-content 属性用于控制多行或多列项目之间的对齐方式，仅适用于 flex 容器或 grid 容器的多行或多列情况。
align-content 属性的可选值如下：
- stretch：默认值，项目将被拉伸以适应容器的高度或宽度。
- flex-start：所有行或列都靠容器的起始边缘对齐。
- flex-end：所有行或列都靠容器的结束边缘对齐。
- center：所有行或列都居中对齐。
- space-between：各行或各列之间平均分布，首行或首列在容器的起始边缘，末行或末列在容器的结束边缘。
- space-around：各行或各列之间平均分布，每行或每列两侧留有相等的间距。
- space-evenly：各行或各列之间平均分布，每行或每列之间的间距相等。
例如，如果你有一个垂直方向上的 flex 容器，其中包含了多行项目，那么 align-content 属性将决定这些行在容器内的垂直对齐方式。
- 如果你将 align-content 设置为 flex-start，则所有行都将靠容器的顶部对齐。
- 如果你将其设置为 flex-end，则所有行都将靠容器的底部对齐。
- 如果你将其设置为 center，则所有行都将沿着容器的垂直中心线对齐。
- 如果你将其设置为 space-between，则各行之间将平均分布，并且首行将靠容器的顶部，末行将靠容器的底部。
- 如果你将其设置为 space-around，则各行之间将平均分布，并且每行两侧留有相等的间距。
- 如果你将其设置为 space-evenly，则各行之间将平均分布，并且每行之间的间距相等。

排布顺序 order

MDN 文档

order - CSS：层叠样式表 | MDN (mozilla.org)

order 决定了 flex items 的排布顺序
- 可以设置任意整数（正整数、负整数、0），值越小就越排在前面
- 默认值是 0
order 属性用于在弹性容器内对 flex item 进行排序，可以控制 flex item 的布局顺序。
order 属性是一个整数值，默认为 0。值越小的 flex item 越先出现在容器内，值相同时按照它们在 HTML 代码中的顺序出现。
除了用数字值指定 order 属性，还可以使用负数值和小数值。负数值将使 flex item 在默认顺序之前出现，小数值将使 flex item 在默认顺序之后出现。
需要注意的是，order 属性不会改变 flex item 在文档流中的位置，只会改变它们在弹性容器内的布局顺序。如果需要改变 flex item 在文档流中的位置，可以使用 CSS 的 position 属性或者 flexbox 的其他属性来实现。

放大比例 flex-grow

MDN 文档

flex-grow - CSS：层叠样式表 | MDN (mozilla.org)

CSS 属性 flex-grow 设置 flex 项主尺寸的 flex 增长系数。
flex-grow 决定了 flex items 如何扩展 (拉伸/成长)
- 可以设置任意非负数字（正小数、正整数、0），默认值是 0
- 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效
如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为
- flex container 的剩余 size * flex-grow / sum
flex items 扩展后的最终 size 不能超过 max-width/max-height

flex-grow 属性用于控制弹性项在空间分配时的增长比例，可以使弹性项占据剩余空间的比例不同。
flex-grow 属性是一个非负数值，默认为 0。它表示弹性项在剩余空间分配中所占的比例，计算方式是将所有弹性项的 flex-grow 值相加，然后将剩余空间按比例分配给弹性项。
例如，如果有三个弹性项 A、B、C，它们的 flex-grow 分别为 1、2、1，则 B 占据剩余空间的比例为 2/(1+2+1)=0.4，A 和 C 的比例均为 0.3。
```
.container {
  display: flex;
}

.item-a {
  flex-grow: 1;
}

.item-b {
  flex-grow: 2;
}

.item-c {
  flex-grow: 1;
}
```
在上述代码中，弹性项 A、B、C 的 flex-grow 分别为 1、2、1，它们将按比例占据剩余空间。
需要注意的是，如果所有弹性项的 flex-grow 值都为 0，它们将不会占据剩余空间，即它们的宽度将是它们的最小宽度（如果设置了 min-width 属性）或者内容宽度。此时，弹性容器的 justify-content 属性对弹性项的对齐方式不会产生影响，因为弹性项没有占据剩余空间。
另外，如果弹性项的 flex-basis 属性为 0，它们的宽度将由 flex-grow 属性决定，即按比例占据剩余空间。如果 flex-basis 属性不为 0，则 flex-grow 属性仅在剩余空间不足以满足 flex-basis 属性时才起作用。

收缩比例 flex-shrink

MDN 文档

flex-shrink - CSS：层叠样式表 | MDN (mozilla.org)

flex-shrink 决定了 flex items 如何收缩 (缩小)
- 可以设置任意非负数字（正小数、正整数、0），默认值是 1
- 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效
如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size 为
- flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
flex items 收缩后的最终 size 不能小于 min-width/min-height

flex-shrink 属性用于控制弹性项在空间不足时的收缩比例，可以使弹性项占据空间的比例不同。
flex-shrink 属性是一个非负数值，默认为 1。它表示弹性项在空间不足时的收缩比例，计算方式是将所有弹性项的 flex-shrink 值相加，然后将不足的空间按比例收缩弹性项。
例如，如果有三个弹性项 A、B、C，它们的 flex-shrink 分别为 1、2、1，则 B 占据不足空间的比例为 2/(1+2+1)=0.4，A 和 C 的比例均为 0.3。
```
.container {
  display: flex;
}

.item-a {
  flex-shrink: 1;
}

.item-b {
  flex-shrink: 2;
}

.item-c {
  flex-shrink: 1;
}
```
在上述代码中，弹性项 A、B、C 的 flex-shrink 分别为 1、2、1，它们将按比例收缩以适应空间不足的情况。
需要注意的是，如果所有弹性项的 flex-shrink 值都为 0，它们将不会收缩，即它们的宽度将是它们的最小宽度（如果设置了 min-width 属性）或者内容宽度。此时，弹性容器的 justify-content 属性对弹性项的对齐方式不会产生影响，因为弹性项没有收缩的可能。
另外，如果弹性项的 flex-basis 属性为 0，它们的宽度将由 flex-shrink 属性决定，即按比例收缩以适应空间不足。如果 flex-basis 属性不为 0，则 flex-shrink 属性仅在空间不足以满足 flex-basis 属性时才起作用。

初始尺寸 flex-basis

MDN 文档

flex-basis - CSS：层叠样式表 | MDN (mozilla.org)

flex-basis 用来设置 flex items 在 main axis 方向上的 base size
- auto（默认值）、具体的宽度数值（100px）
决定 flex items 最终 base size 的因素，从优先级高到低
- max-width/max-height/min-width/min-height
- flex-basis
- width/height
- 内容本身的 size
flex-basis 属性用于设置弹性项在主轴方向上的初始尺寸。它定义了一个弹性项的初始大小，以便在剩余空间分配之前进行分配。
默认值为 auto，即元素的本来的大小。flex-basis 可以取一个长度值或一个百分比，也可以设置为 content、fit-content 或 auto 等关键字。
下面是一些常用的取值：
- 长度值：如 flex-basis: 100px;，表示初始尺寸为 100 像素。
- 百分比：如 flex-basis: 50%;，表示初始尺寸为父元素宽度的一半。
- content：表示元素的大小应该与其内容一样（如果弹性项没有内容，则尺寸为 0）。
- fit-content：表示元素应该根据其内容调整大小，但是不要超过其 max-content 大小。
- auto：表示默认值，即元素的本来的大小。
在布局时，弹性项的 flex-basis 属性会在弹性容器的可用空间中占据一定的空间，然后根据弹性项的 flex-grow 和 flex-shrink 属性来分配剩余空间。如果弹性项的 flex-basis 属性为 0，则 flex-grow 和 flex-shrink 属性将决定其在弹性容器中的尺寸。
```
.container {
  display: flex;
}

.item {
  flex-basis: 100px;
}
```
在上述代码中，所有弹性项的 flex-basis 属性为 100 像素，它们将占据主轴方向上的 100 像素的空间。
需要注意的是，flex-basis 属性不是用来设置最小或最大宽度的，而是用来设置初始尺寸的。如果想要设置最小或最大宽度，应该使用 min-width 或 max-width 属性。

弹性伸缩比 flex

MDN 文档

flex - CSS：层叠样式表 | MDN (mozilla.org)

flex 属性是一个缩写属性，用于设置弹性容器的三个子属性：flex-grow、flex-shrink 和 flex-basis。
```
flex =
  none                                                |
  [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
```
其中，flex-grow 和 flex-basis 为必须项，flex-shrink 为可选项。这三个子属性的作用分别如下：
- flex-grow：用于设置弹性项在可用空间增加时的放大比例。默认值为 0，表示不放大。
- flex-shrink：用于设置弹性项在可用空间减少时的收缩比例。默认值为 1，表示等比例收缩。
- flex-basis：用于设置弹性项在主轴方向上的初始尺寸。默认值为 auto，即元素的本来的大小。
flex 是 flex-grow || flex-shrink || flex-basis 的简写，flex 属性可以指定 1 个，2 个或 3 个值。
flex = none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
- flex-grow 和 flex-basis 为必须项，flex-shrink 为可选项。
单值语法：值必须为以下其中之一：
- 一个无单位数 (<number>): 它会被当作 <flex-grow> 的值。
- 一个有效的宽度 (width) 值：它会被当作 <flex-basis> 的值。
- 关键字 none，auto 或 initial.
双值语法：第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
- 第二个值必须为以下之一：
  - 一个无单位数：它会被当作 <flex-shrink> 的值。
  - 一个有效的宽度值：它会被当作 <flex-basis> 的值。
三值语法：
- 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
- 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
- 第三个值必须为一个有效的宽度值，并且它会被当作 <flex-basis> 的值。

### 总结 flex 布局 container 和 item 的属性以及作用

container
- flex-direction
  - 决定主轴 (main axis) 的方向 (正方向或者反方向) 有四个值
    - row(默认)
    - column 定义了主轴的方向和块轴排列的方向相同
    - row-reverse 与 row 的方向相反
    - column-reverse 与 column 的方向相反
- flex-wrap
  - 定义了 flex container 是单行还是多行有如下值
    - nowrap(默认不换行)
    - wrap(多行排列)
    - wrap-reverse 多行排列从下到上与正常方向相反 (不常用)
- flex-flow
  - flex-direction 与 flex-wrap 的缩写
- align-items
  - 决定了 items 在纵横轴上的排布方式值如下
    - baseline 与 items 的基线对齐
    - normal 在弹性布局中效果和 stretch 一样
    - center 居中对齐
    - flex-start 与 cross start 对齐
    - flex-end 与 cross end 对齐
    - stretch 当 items 在 cross axis 的高度 (默认为 auto) 为 auto 时会自动拉伸至 container 的高度
- justify-content
  - 决定了 main axis 方向上 flex items 的对齐方式值如下
    - center 居中对齐
    - flex-start 与 main start 对齐
    - flex-end 与 main end 对齐
    - space-between items 之间的距离相等
    - space-around items 之间的距离相等 items 与 main start 和 main end 之间的距离是 item 与 item 之间距离的一半
    - space-evenly items 之间的距离相等 items 与 main start 和 main end 之间的距离与 item 与 item 之间的距离相等
- align-content
  - 决定了 items 在 cross axis 上的对齐方式用法与 justify-content 相似
  - 只是由 main 方向换成了 cross axis 方向
item
- flex-grow
  - grow 拉伸可以设置任意非负数字 (默认值是 0)
  - 当 item 的宽度在 main axis 有剩余的 size 时才会生效
  - 如果所有的 items 都有相同的 flex-grow 系数，那么所有的 items 将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。
  - 扩展后的最终 size 不能超过 max-width/max-height
- flex-shrink
  - shrink 收缩可以设置任意非负数字只有当 item size 的盒超过了 contaienr 的 size 时才会生效 (默认值为 1)
  - 如果
  - 收缩后的最终 size 不能小于 min-width/min-height
- flex-basis
  - 用来设置 item 在主轴上的基本的 size
  - item 的优先级从高到低依次为
    - max/min-width/height
    - flex-basis
    - width/height
    - 内容本身的大小
  - 例外
    - 如果 item 内文字过长会拉伸 (没有设置 width 时无论实际宽度是否超出 flex-basis 的值)
- align-self
  - 通过给某个 flex item 设置 align-self，会对齐当前 grid 或 flex 行中的元素，并会覆盖 align-items 的设置。
- order
  - 默认值是 0 可以是任意整数值越小排在前面
- flex
  - flex-grow flex-shrink flex-basis 的组合
  - flex = none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  - 可以使用一个，两个或三个值来指定 flex 属性。
  - 一个值时
    - 数字被当成 flex-grow
    - 有效的宽度被当成 flex-basis
    - auto: 1 1 auto
    - none: 0 0 auto
  - 两个值时
    - 第一个值必须为无单位数被当成 flex-grow
    - 第二个值为无单位值时被当成 flex-shrink 有单位时是 flex-basis
  - 三个值时前两个为无单位值最后一个为有单位宽度值依次为 flex-grow flex-shrink flex-basis

综合案例 6 - 抖音解决方案

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>抖音解决方案</title>
    <style>
      .douyin-solution {
        width: 1200px;
        height: 418px;
        margin: 50px auto;

        border: 1px solid #ddd;
        border-radius: 10px;
        background-color: #f5f5f5;
      }

      .douyin-solution__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;

        height: 100%;
      }

      .douyin-solution__item {
        display: flex;
        width: 50%;
        height: 50%;
      }

      .douyin-solution__item-pic img {
        width: 100px;
        height: 100px;
      }

      .douyin-solution__item-text-title {
        line-height: 20px;
        font-size: 20px;
        font-weight: 400;
        color: #333;
      }

      .douyin-solution__item-text-desc {
        font-size: 14px;
        /* line-height: 14px; */
        color: #666;
      }
    </style>
  </head>

  <body>
    <div class="douyin-solution">
      <ul class="douyin-solution__list">
        <li class="douyin-solution__item">
          <div class="douyin-solution__item-pic">
            <img
              src="https://s2.loli.net/2023/08/27/7oK8pZ3WwfkgxT1.png"
              alt=""
              class="douyin-solution__item-pic-img" />
          </div>
          <div class="douyin-solution__item-text">
            <h4 class="douyin-solution__item-text-title">一键发布多端</h4>
            <p class="douyin-solution__item-text-desc">发布视频到抖音短视频、西瓜视频及今日头条</p>
          </div>
        </li>

        <li class="douyin-solution__item">
          <div class="douyin-solution__item-pic">
            <img
              src="https://s2.loli.net/2023/08/27/pLMIHQxJl2bCs75.png"
              alt=""
              class="douyin-solution__item-pic-img" />
          </div>
          <div class="douyin-solution__item-text">
            <h4 class="douyin-solution__item-text-title">管理视频内容</h4>
            <p class="douyin-solution__item-text-desc">支持修改已发布稿件状态和实时查询视频审核状态</p>
          </div>
        </li>

        <li class="douyin-solution__item">
          <div class="douyin-solution__item-pic">
            <img
              src="https://s2.loli.net/2023/08/27/cqnEhfTKseV1jwb.png"
              alt=""
              class="douyin-solution__item-pic-img" />
          </div>
          <div class="douyin-solution__item-text">
            <h4 class="douyin-solution__item-text-title">发布携带组件</h4>
            <p class="douyin-solution__item-text-desc">
              支持分享内容携带小程序、地理位置信息等组件，扩展内容及突出地域性
            </p>
          </div>
        </li>

        <li class="douyin-solution__item">
          <div class="douyin-solution__item-pic">
            <img
              src="https://s2.loli.net/2023/08/27/w7aW5qMh1ofIXxp.png"
              alt=""
              class="douyin-solution__item-pic-img" />
          </div>
          <div class="douyin-solution__item-text">
            <h4 class="douyin-solution__item-text-title">数据评估分析</h4>
            <p class="douyin-solution__item-text-desc">
              获取视频在对应产品内的数据表现、获取抖音热点，及时进行表现评估
            </p>
          </div>
        </li>
      </ul>
    </div>
  </body>
</html>

## 作业 1 - 小米模块案例

使用 float

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米模块案例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .page {
        width: 1226px;
        margin: 30px;
      }

      .page__left {
        float: left;
        width: 234px;
        height: 614px;
        background-color: #800080;
      }

      .page__right {
        float: right;
        width: 978px;
        height: 614px;
        background-color: pink;
      }

      .page__item {
        float: left;
        width: 234px;
        height: 300px;
        margin: 0 14px 14px 0;

        background-color: #87ceeb;
      }

      .page__item:nth-child(4n) {
        margin-right: 0;
      }

      .page__item:nth-child(n + 4) {
        margin-bottom: 0;
      }
    </style>
  </head>

  <body>
    <div class="page">
      <div class="page__left"></div>
      <div class="page__right">
        <div class="page__item"></div>
        <div class="page__item"></div>
        <div class="page__item"></div>
        <div class="page__item"></div>
        <div class="page__item"></div>
        <div class="page__item"></div>
        <div class="page__item"></div>
        <div class="page__item"></div>
      </div>
    </div>
  </body>
</html>

使用 flexbox

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米模块案例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .page {
        display: flex;
        justify-content: space-between;
        width: 1226px;
        margin: 30px;
      }

      .page__left {
        width: 234px;
        height: 614px;
        background-color: #800080;
      }

      .page__right {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        width: 978px;
        height: 614px;
        background-color: pink;
      }

      .page__item {
        width: 234px;
        height: 300px;
        margin-bottom: 14px;
        background-color: #87ceeb;
      }
    </style>
  </head>

  <body>
    <div class="page">
      <div class="page__left"></div>
      <div class="page__right">
        <div class="page__item"></div>
        <div class="page__item"></div>
        <div class="page__item"></div>
        <div class="page__item"></div>
        <div class="page__item"></div>
        <div class="page__item"></div>
        <div class="page__item"></div>
        <div class="page__item"></div>
      </div>
    </div>
  </body>
</html>

作业 2 - 网页导航案例

使用 float

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网页导航案例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
      }

      a {
        text-decoration: none;
        color: #000;
      }

      .nav {
        margin: 30px;
        height: 50px;
        /* background-color: pink */
      }

      .nav__item {
        float: left;
      }

      .nav__link {
        float: left;
        width: 80px;
        height: 50px;
        background-color: #ffc0cb;

        text-align: center;
        line-height: 50px;
        font-size: 16px;
        color: #fff;
      }

      .nav__link:hover {
        background-color: #008000;
      }
    </style>
  </head>

  <body>
    <ul class="nav">
      <li class="nav__item"><a class="nav__link" href="#">新闻 1</a></li>
      <li class="nav__item"><a class="nav__link" href="#">新闻 2</a></li>
      <li class="nav__item"><a class="nav__link" href="#">新闻 3</a></li>
      <li class="nav__item"><a class="nav__link" href="#">新闻 4</a></li>
      <li class="nav__item"><a class="nav__link" href="#">新闻 5</a></li>
      <li class="nav__item"><a class="nav__link" href="#">新闻 6</a></li>
      <li class="nav__item"><a class="nav__link" href="#">新闻 7</a></li>
      <li class="nav__item"><a class="nav__link" href="#">新闻 8</a></li>
    </ul>
  </body>
</html>

使用 flexbox

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网页导航案例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
      }

      a {
        text-decoration: none;
        color: #000;
      }

      .nav {
        display: flex;
        margin: 30px;
        height: 50px;
        /* background-color: pink */
      }

      .nav__item {
        display: flex;
      }

      .nav__link {
        width: 80px;
        height: 50px;
        background-color: #ffc0cb;

        text-align: center;
        line-height: 50px;
        font-size: 16px;
        color: #fff;
      }

      .nav__link:hover {
        background-color: #008000;
      }
    </style>
  </head>

  <body>
    <ul class="nav">
      <li class="nav__item"><a class="nav__link" href="#">新闻 1</a></li>
      <li class="nav__item"><a class="nav__link" href="#">新闻 2</a></li>
      <li class="nav__item"><a class="nav__link" href="#">新闻 3</a></li>
      <li class="nav__item"><a class="nav__link" href="#">新闻 4</a></li>
      <li class="nav__item"><a class="nav__link" href="#">新闻 5</a></li>
      <li class="nav__item"><a class="nav__link" href="#">新闻 6</a></li>
      <li class="nav__item"><a class="nav__link" href="#">新闻 7</a></li>
      <li class="nav__item"><a class="nav__link" href="#">新闻 8</a></li>
    </ul>
  </body>
</html>

作业 3 - 微金所导航案例

使用 float

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>微金所导航案例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      ul {
        list-style: none;
      }

      a {
        text-decoration: none;
        color: #000;
      }

      .header {
        height: 50px;
        border-bottom: 1px solid #ccc;
      }

      .header__nav {
        width: 1200px;
        margin: 0 auto;
      }

      .header__item {
        float: left;
        width: 20%;
        height: 100%;
        /* background-color: pink; */

        text-align: center;
        line-height: 50px;
        border-right: 1px solid #ccc;
      }

      .header__item--last {
        border-right: none;
      }

      .header__link {
        display: block;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div class="header">
      <ul class="header__nav">
        <li class="header__item"><a class="header__link" href="#">我要投资</a></li>
        <li class="header__item"><a class="header__link" href="#">平台介绍</a></li>
        <li class="header__item"><a class="header__link" href="#">新手专区</a></li>
        <li class="header__item"><a class="header__link header__link--app" href="#">手机微金所</a></li>
        <li class="header__item header__item--last"><a class="header__link" href="#">个人中心</a></li>
      </ul>
    </div>
  </body>
</html>

使用 flexbox

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>微金所导航案例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      ul {
        list-style: none;
      }

      a {
        text-decoration: none;
        color: #000;
      }

      .header {
        height: 50px;
        border-bottom: 1px solid #ccc;
      }

      .header__nav {
        display: flex;
        width: 1200px;
        margin: 0 auto;
      }

      .header__item {
        width: 20%;
        height: 100%;
        /* background-color: pink; */

        text-align: center;
        line-height: 50px;
        border-right: 1px solid #ccc;
      }

      .header__item--last {
        border-right: none;
      }

      .header__link {
        display: block;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div class="header">
      <ul class="header__nav">
        <li class="header__item"><a class="header__link" href="#">我要投资</a></li>
        <li class="header__item"><a class="header__link" href="#">平台介绍</a></li>
        <li class="header__item"><a class="header__link" href="#">新手专区</a></li>
        <li class="header__item"><a class="header__link header__link--app" href="#">手机微金所</a></li>
        <li class="header__item header__item--last"><a class="header__link" href="#">个人中心</a></li>
      </ul>
    </div>
  </body>
</html>

作业 4 - 抖音开放 API

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>抖音开放API</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      ul {
        list-style: none;
      }

      body {
        background-color: #f5f5f5;
      }

      .page {
        width: 1076px;
        height: 540px;
        margin: 30px;
        /* background-color: pink; */
      }

      .page__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
      }

      .page__item {
        width: 254px;
        height: 260px;
        margin-bottom: 20px;
        padding: 0 45px;
        background-color: #fff;

        text-align: center;
        border-radius: 10px;
      }

      .page__img {
        width: 58px;
        height: 58px;
        margin-top: 45px;
      }

      .page__title {
        margin-top: 20px;
        margin-bottom: 5px;
        font-weight: 600;
      }

      .page__desc {
        font-size: 14px;
        color: #999;
      }
    </style>
  </head>

  <body>
    <div class="page">
      <ul class="page__list">
        <li class="page__item">
          <img class="page__img" src="https://s2.loli.net/2023/08/28/mPxKUCLsZbyWNHV.png" alt="" />
          <h4 class="page__title">账号授权</h4>
          <p class="page__desc">包含抖音帐号授权登录与授权绑定的能力</p>
        </li>
        <li class="page__item">
          <img class="page__img" src="https://s2.loli.net/2023/08/28/pIjwfOskeQzR6tB.png" alt="" />
          <h4 class="page__title">用户管理</h4>
          <p class="page__desc">包含用户的基础信息以及关系链相关数据的获取</p>
        </li>
        <li class="page__item">
          <img class="page__img" src="https://s2.loli.net/2023/08/28/fpwdJDukiEBz6Xa.png" alt="" />
          <h4 class="page__title">视频管理</h4>
          <p class="page__desc">包含抖音、西瓜、头条视频的发布以及相关数据的获取能力</p>
        </li>
        <li class="page__item">
          <img class="page__img" src="https://s2.loli.net/2023/08/28/4SQO2LnUhG8REtc.png" alt="" />
          <h4 class="page__title">互动管理</h4>
          <p class="page__desc">包含私信收发以及评论管理的能力</p>
        </li>
        <li class="page__item">
          <img class="page__img" src="https://s2.loli.net/2023/08/28/ByGi4r3MAUg1zZl.png" alt="" />
          <h4 class="page__title">搜索管理</h4>
          <p class="page__desc">包含通过关键词获取抖音视频及该视频下评论，并进行回复的能力</p>
        </li>
        <li class="page__item">
          <img class="page__img" src="https://s2.loli.net/2023/08/28/aRlAT89x5DHQ7Su.png" alt="" />
          <h4 class="page__title">数据开放服务</h4>
          <p class="page__desc">包含用户授权后的公开用户数据，视频数据等能力</p>
        </li>
        <li class="page__item">
          <img class="page__img" src="https://s2.loli.net/2023/08/28/CO4kMtYWIFHRels.png" alt="" />
          <h4 class="page__title">企业号开放能力</h4>
          <p class="page__desc">包含企业号意向用户、企业消息卡片、团购活动等的管理能力</p>
        </li>
        <li class="page__item">
          <img class="page__img" src="https://s2.loli.net/2023/08/28/u7dPMyiR5JeLXCD.png" alt="" />
          <h4 class="page__title">生活服务开放能力</h4>
          <p class="page__desc">包含商铺/商品库/交易系统等能力的开放接入</p>
        </li>
      </ul>
    </div>
  </body>
</html>

06 - Flex 布局

标准流 Normal Flow

浮动 float

浮动基本使用与布局

京东布局练习

考拉布局练习

浮动的问题 - 高度塌陷

清除浮动 clear

清除浮动塌陷

浮动总结

flex 布局

flex 布局简介

flex 布局组成

主轴对齐方式 justify-content

侧轴对齐方式 align-items/align-self

修改主轴方向 flex-direction

弹性换行 flex-wrap

行对齐方式 align-content

排布顺序 order

放大比例 flex-grow

收缩比例 flex-shrink

初始尺寸 flex-basis

弹性伸缩比 flex

综合案例 6 - 抖音解决方案

使用 float

使用 flexbox

作业 2 - 网页导航案例

使用 float

使用 flexbox

作业 3 - 微金所导航案例

使用 float

使用 flexbox

作业 4 - 抖音开放 API

作业 5 - 小兔鲜部分