【CSS 弹性盒子布局 (Flexible Box Layout)】

---

CSS 弹性盒子布局 (Flexible Box Layout)

用于	属性名	CSS 版本
① 设置 伸缩项的 伸缩性和比例 (简写属性，用于伸缩项)。	flex	3
❶ 伸缩项 主轴上的 宽或高的 剩余空间的分配和比例 ( 数字值，默认不分配 0)	flex-grow	3
❷ 设置 伸缩项的 收缩因子/比例 (数字值，默认 等比例收缩 1)	flex-shrink	3
❸ 伸缩项的 主轴方向上的 初始 宽或高 (伸缩前的 假设大小 ，不一定等于真实 宽或高,默认 按照宽高比 auto)	flex-basis	3
② 同时设置 主轴方向和 伸缩项的换行 (简写属性)	flex-flow	3
❶ 设置 主轴方向 和 伸缩项排列方向 (用于 伸缩容器，默认值 正文本方向row )	flex-direction	3
❷ 设置 伸缩容器中 伸缩项的换行 (用于 伸缩容器，默认 不换行 nowrap)	flex-wrap	3
③ 设置 伸缩容器 或 网格容器中 项目(子元素)的 排列顺序 (正负整数值,默认值 0, 用于伸缩项/项目 本身)	order	3

---

1. 弹性盒子布局的 基本概念和术语

• ⑴ CSS 弹性盒子布局 (Flexible Box Layout )是 CSS 的模块之一， 针对 用户界面设计 而优化的 CSS 盒子模型。
  • ① 排布方向:
    • 在弹性布局模型中，弹性容器的子元素 可以在任何方向上排布。
  • ② 尺寸的伸缩:
    • 可以“弹性伸缩”其尺寸，既可以增加尺寸 以填满 未使用的空间，也可以 收缩尺寸 以避免父元素溢出。
    • 根据需要 进行伸缩: 弹性布局 ⇒ 在任何尺寸的屏幕上 改变其和其子元素的尺寸 填充屏幕可用空间。
      • 一个弹性框容器 将延展它的子元素 以填充可用空间，并且缩小它的子元素 来避免溢出。
  • ③ 水平和垂直对齐:
    • 子元素的 水平对齐和垂直对齐 都能很方便的进行操控。
  • ④ 框的嵌套:
    • 通过嵌套这些框（水平框在 垂直框内，或垂直框 在水平框内）可以在两个维度上 构建布局。
  • ⑤ 涉及 属性
    • ❶ flex
    • ❷ flex-basis
    • ❸ flex-direction
    • ❹ flex-flow
    • ❺ flex-grow
    • ❻ flex-shrink
    • ❼ flex-wrap
    • ❽ order
  • ⑥ 相关对齐属性
    • align-content、align-self、align-items 和 justify-content 最初出现在 Flexbox 规范中，如今在 Box Alignment 中定义。
    • Flexbox 规范引用了 Box Alignment 规范 以获取最新定义。
    • Box Alignment 中还定义了 其他的对齐属性。
      • ❶ align-content
      • ❷ align-items
      • ❸ align-self
      • ❹ justify-content
      • ❺ place-content
      • ❻ row-gap
      • ❼ column-gap
      • ❽ gap

---

• ⑵ 弹性盒子的 相关术语
  • 
  • ① 弹性盒子（Flexbox）
    • 一维布局:
      • Flexbox 是 CSS Flexible Box Layout Module 的常用名称，用于 单个维度（行或列）中 显示项目的布局模型。
      • flexbox 是一维的布局，是因为 一次只能处理 一个维度上的元素布局，一行或者一列。作为对比的是 二维布局 CSS 网格布局 ( Grid Layout)，可以同时处理 行和列上的布局。
  • ② 伸缩容器 （Flex Container）
    • 父元素 搭配属性 display ⇒ 伸缩容器 + 伸缩项 ⇒ 伸缩 格式化上下文。
      • display的属性值: 定义一个 flexbox（伸缩盒布局），需要 在一个父级元素上 使用 display属性的值：❶ flex或 ❷ inline-flex。
        • ❶ 块级伸缩容器: display: flex; ⇒ 两个伸缩容器之间 换行 。
          • 
        • ❷ 行内级 伸缩容器: display: inline-flex; ⇒ 两个伸缩容器之间 不换行。
          • 
      • 伸缩容器和伸缩项:
        • 这个父级元素 将成为 flex container（❶ 伸缩容器），而它的所有子元素 将变成 flex item（❷ 伸缩项）。
      • 块级 伸缩容器 和 行内级 伸缩容器:
        • 使用 flex 值 ⇒ 将元素渲染成为 一个 ❶ 块级 伸缩容器，使用 inline-flex 值 ⇒ 将元素渲染成一个 ❷ 行内级 伸缩容器。
      • 伸缩 格式化上下文:
        • 这些值 会将元素格式化，产生 伸缩 格式化上下文 (flex formatting context)，这类似于 块的格式化上下文。
      • 浮动、外边距 和 伸缩容器:
        • 浮动 不会干扰 伸缩容器。
        • 容器的 所有外边距 (margins)不会和 伸缩项的外边距 合并。
  • ③ 弹性项目/ 弹性元素 / 伸缩项（Flex Item）
    • 伸缩容器中的 所有子元素。
  • ④ 主轴（Main Axis）
    • 主轴由 flex-direction 定义，另一根轴 垂直于它。
    • 主轴起点(main-Start) 和 主轴终点(main-end): 伸缩项 被放置于 伸缩容器中，从主轴起点 到主轴终点 进行排列。
  • ⑤ 交叉轴（Cross Axis）
    • 交叉轴 垂直于主轴。
    • 交叉轴 起点(Cross-Start) 和 交叉轴终点(Cross-end): 换行的方向 ⇒ 在容器中 沿交叉轴方向 从起点向终点分布。
  • ⑥ 伸缩性 （Flex）

---

• ⑶ 相关属性 适用对象划分
  • ① 用于 伸缩容器的属性
    • flex-flow
      • flex-direction
      • flex-wrap
    • justify-content
    • align-items
    • align-content
  • ② 用于 弹性元素/伸缩项的 属性
    • flex
      • flex-grow
      • flex-shrink
      • flex-basis
    • order
    • align-self

---

2. flex 属性: 设置 伸缩项的 伸缩性和比例 (简写属性，用于伸缩项)

• ⑴ 设置 伸缩项的 伸缩性和比例: flex 属性
  • 设置了 弹性元素(伸缩项) 如何拉伸或缩短 以适应 伸缩容器中的 空间。
  • ① 简写属性: 用来设置 以下的子属性 (可以先学习子属性 再学习此属性)
    • ❶ 主轴上 剩余空间的分配: flex-grow
      • 语法: flex-grow: ;(数字，不带单位)
      • 默认值为0，负值无效。
    • ❷ 主轴上 收缩比例: flex-shrink
      • 语法: flex : ; (数字，不带单位)
      • 默认值为1，负值无效。
    • ❸ 主轴上 假设大小 (宽或高)flex-basis
      • 语法: flex-basis: auto | | | content; (长度值,带单位 ，百分比值,关键字值)
      • 带单位: 默认值为 auto。若值为0，则必须 加上单位，以免被视作 伸缩性。
  • ② 子属性的初始值
    • 不分配剩余空间: flex-grow: 0
    • 按比例收缩: flex-shrink: 1
    • 按宽或高 比例显示尺寸: flex-basis: auto

---

• ⑵ 伸缩性的取值
  • 设置为以下值之一: auto、initial、none 或 无单位 正的数字。
  • 1~3个值: 可以指定 1个，2个或 3个值。
  • 匹配优先级：flex-grow > flex-shrink > flex- basis
  • ① 单值语法: 值必须为以下其中之一
    • ❶ 一个无单位 数字(): 被当作的值 ⇒ 剩余空间分配。
      • ★ 相当于 ⇒ flex: 1 0px;
        • 值 假设为1(默认值)，等比例 收缩。
        • 值 假设为0 = 无假设大小,按照最小 内容大小 显示。 (非默认值,默认值是 auto 按照宽或高 比例显示)。
          • ★ 假设大小 默认值的转变: 当使用 1个或 2个 无单位数时, flex-basis 会从 默认值auto 变为0px.
    • ❷ 一个有效的 宽度(width)值: 被当作 的值 ⇒ 假设大小宽或高。
    • ❸ 关键字之一: none，auto或 initial。
  • ② 双值语法:
    • ❶ 第一个值必须为一个 无单位 数字，并且它会被当作 的值。
    • ❷ 第二个值必须为以下之一：
      • 一个无单位数：它会被当作 的值。
      • 一个有效的宽度值: 它会被当作 的值。
  • ③ 三值语法:
    • 值的顺序: 剩余空间分配 → 收缩比例 → 预设大小 (grow → shrink → basis)
      • 数字(无单位) →数字(无单位) → 有效宽度值 (数字带单位，百分比值，关键字值)
    • ❶ 第一个值 必须为一个 无单位数 ⇒ 会被当作 的值。
    • ❷ 第二个值 必须为一个 无单位数 ⇒ 会被当作 的值。
    • ❸ 第三个值 必须为一个 有效的宽度值 ⇒ 会被当作 的值。

---

• ⑶ 单值 关键字的等价值
  • ① 各项的初始值: initial
    • 元素会根据自身宽高 设置尺寸。它会缩短自身 以适应 伸缩容器(父元素)，但不会分配 额外的剩余空间 。
    • ❶ initial ⇔ flex: 0 1 auto;。
    • ❷ 不分配剩余空间+按比例收缩+按宽高比 显示尺寸。
  • ② 按比例 伸缩: auto
    • 元素会根据自身的宽度与高度 来确定尺寸，会分配额外的剩余空间，也会缩短自身 来适应 伸缩容器。
    • ❶ auto ⇔ flex: 1 1 auto;
    • ❷ 按比例 分配剩余空间 + 按比例收缩 + 按宽高比 显示尺寸。
  • ③ 不伸缩: none
    • 元素会根据自身宽高 来设置尺寸。它是完全非弹性的：既不会缩短，也不会因为分配剩余空间 而拉伸。
    • ❶ none ⇔ flex: 0 0 auto;。
    • ❷ 不分配剩余空间 + 不收缩 + 按宽高比 显示尺寸。
• 相同点: 都是 按照宽高比 显示尺寸 flex-basis: auto;

---

• ⑷ 伸缩性的 语法
  • flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

/* 关键字值 Keyword values */
flex: auto;
flex: initial;
flex: none;

/* 一个值   ⇒  分配剩余空间 One value, unitless number: flex-grow */
flex: 2;

/* 一个值  ⇒  假设大小  One value, width/height: flex-basis */
flex: 10em;
flex: 30%;
flex: min-content;

/* 两个值   ⇒  分配剩余空间 比例 + 假设大小 Two values: flex-grow | flex-basis */
flex: 1 30px;

/* 两个值   ⇒  分配剩余空间 比例 + 收缩比例 Two values: flex-grow | flex-shrink */
flex: 2 2;

/* 三个值   ⇒  配剩余空间 比例 + 收缩比例 + 假设大小 (初始大小) Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* 全局值 Global values */
flex: inherit;
flex: initial;
flex: unset;

---

• ⑸ 伸缩性的 浏览器支持
  • 需要浏览器前缀: -webkit-
  • 

---

2.1 flex-grow 属性: 伸缩项 主轴上的 宽或高的 剩余空间的分配和比例 ( 数字值，默认不分配 0)

• ⑴ 设置 伸缩项 主轴上的 宽或高的 剩余空间的 分配和比例: flex-grow 属性
  • 属性设置 伸缩项 主大小的拉伸因子。
  • ① 主大小 (main size): 主轴上的 宽或高。
    • 伸缩容器或伸缩项的 (无论哪个 ❶ 在主维度中) ❷ 宽度或高度 是 该盒子的主大小，取决于❸ flex-direction的值。
    • 
  • ② 剩余的空间: 是伸缩容器的大小 减去所有 伸缩项目的整体大小 (包含 外边距及以内的所有宽或高)。
    • ❶ 有剩余空间的时候 ⇒ flex-grow = 剩余空间 分配 给 伸缩项的比例 ⇒ flex-grow 有效 ⇒ 剩余空间 分配到 伸缩项的内容区 (content-box，外边距、边框、内边距等 大小不变,只有内容区的宽或高 改变)
    • ❷ 无剩余空间时 ⇒ 伸缩容器的大小 ＜所有 伸缩项目的大小之和 ⇒ flex-grow 无效。
    • ❸ 伸缩容器的大小 ＜所有 伸缩项目的大小之和 时 ⇒ 产生剩余空间 ⇒ 设置flex-basis:0;无假设大小 ⇒ 此时，即使 伸缩容器大小不足时， 也会有剩余空间 ⇒ flex-grow 有效 。
  • ③ 剩余空间的分配:
    • 按比例 分配: 如果所有兄弟项目 都具有相同的 伸缩因子 ⇒ 所有项目 将获得相同的 剩余空间份额 (本质 按照相同比例分配)，否则将按照 ❶ 不同伸缩因子 定义的比例 进行分配。
  • ④ 适用对象
    • 伸缩项 (flex items), 包括 in-flow pseudo-elements.
  • ⑤ 搭配属性
    • flex-grow与 ❶ flex-shrink 和 ❷ flex-basis一起使用，通常使用 flex简写属性 来定义，以确保 设置了所有值。

---

• ⑵ 伸缩项 拉伸大小的 语法和属性值
  • flex-grow: ;
    • ① 属性值: 数字。
    • ② 负值: 无效。
    • ③ 默认值: 为 0。该元素不分配 父元素的剩余空间，如果值大于0，表示分配。值越大，分配的剩余空间越多。

/* 数字值  values */
flex-grow: 3;
flex-grow: 0.6;

/* 全局值 Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;

---

• ⑶ 伸缩项的 拉伸因子的浏览器支持
  • 需要浏览器前缀 -webkit-
  • 

---

• html

<h2>做人h2>
<div class="flexcontainer">
    <div class="flexitem1">不怨天尤人，div>
    <div class="flexitem2">不恶语伤人，div>
    <div class="flexitem3">群处守嘴，div>
    <div class="flexitem4">独处守心。div>
div>

• css

.flexcontainer{
    border: solid 5px lightseagreen;
    width: 40%;
    margin: 10px;
    padding: 10px;
    display: flex;
    font-weight: bold;
}
.flexcontainer div{
    border: dashed 5px lightskyblue;
    padding: 10px;
    margin: 10px;
    /*flex-grow: 1;*/
    /*-webkit-flex-grow: 1;*/
    flex-shrink: 1;
    flex-basis: 0;
}
.flexitem1{
    flex-grow: 1;
}
.flexitem2{
    flex-grow: 2;
}
.flexitem3{
    flex-grow: 3;
}
.flexitem4{
    flex-grow: 4;
}

---

• 示例1: 给一段话 设置成弹性盒子的布局。代码见上方。
  • 主轴上 伸缩项的宽度 和 伸缩项的 伸缩因子 成正比。
    • 

---

• html

<div class="flexcontainer">
    <div class="flexitem1 green">不怨天尤人，div>
    <div class="flexitem2 red">不恶语伤人，div>
    <div class="flexitem3 green">群处守嘴，div>
    <div class="flexitem4 red">独处守心。div>
div>

• css

.flexcontainer{
    border: solid 5px lightseagreen;
    width:700px;
    margin: 10px;
    padding: 10px;
    display: flex;
    font-weight: bold;
}
.flexcontainer div{
    border: dashed 5px lightskyblue;
    padding: 10px;
    margin: 10px;
    /*伸缩容器有剩余空间时，剩余空间的分配*/
    /*flex-grow: 0;!*不分配剩余空间*!*/
    /*flex-grow: 1;!*等比例分配 剩余空间*!*/
}
.flexitem1{
    /*flex-grow: 1;*/
    flex-basis: 50px;
}
.flexitem2{
    /*flex-grow: 2;*/
    width: 100px;
    flex-basis: 100px;/*父元素宽度足够时 +不分配剩余空间  ⇒  实际宽度 = 此值,父元素的宽度不够时，元素的宽度实际值 并不是此值*/

}
.flexitem3{
    /*flex-grow: 3;*/
    flex-basis: 50px;
}
.flexitem4{
    /*flex-grow: 4;*/
    -webkit-flex-basis: 100px;

}
.green{
    background-color: lightgreen;
}

.red{
    background-color: lightpink;
}

---

• 示例2: 剩余空间的计算和分配。代码见上方。
• ① 默认值 = 不分配剩余空间: flex-grow: 0;
  • ❶ 主轴为横向 ⇒ 伸缩容器 空间足够 ⇒ 剩余空间 大小 = 伸缩容器的宽度(内容区宽度width) 700px - 4个元素的整体宽度(包括 左右外边距/ 左右边框/ 左右内边距/ 内容区) = 700px - 100px- 150px- 100px-150px = 700px - 500px = 200px = 剩余空间
  • ❷ 注意:此处 伸缩项的 内容区的宽度 是通过 flex-basis (代替 width) 指定的。
    • 伸缩容器 空间足够+ 不分配剩余空间 ⇒ 伸缩项的实际宽度 = flex-basis的值 (没有最大/最小宽度 限制时)
  • 
  • 
    • ❸ 第一个和第三个元素的整体宽度
      • 
    • ❹ 第二个和第四个元素的 整体宽度
    • 
• ② 等比例 分配剩余空间 ⇒ 伸缩项 都设置为: flex-grow: 1; (相同数字 = 等比例)
  • 剩余空间 = 200px
  • 每个伸缩项 分配到的剩余空间 = 200px ×1/(1+1+1+1) = 200px × 1/4 = 50px
  • 分配到的剩余空间 ⇒ 添加到 每个伸缩项的 内容区 ⇒ 每个元素的宽度 变大50px
    • 
  • ❶ 第一个和第三个元素 内容区宽度 = 50px + 50px剩余空间 = 100px ⇒ 整体宽度 增大 50px
    • 
  • ❷ 第二和第四元素 内容区宽度 = 100px + 50px剩余空间 = 150px⇒ 整体宽度 增大 50px
    • 
• ③ 按比例 分配剩余空间
  • 
  • 1:2:3:4 ⇒
    • ❶ 200px × 1/(1+2+3+4) = 200px ×1/10 = 20px ⇒ 第一项 内容区宽度 = 50px + 20px剩余空间 = 70px
      • 
    • ❷ 200px× 2/10 = 40px ⇒ 第二项 内容区宽度 = 100px + 40px剩余空间 = 140px
      • 
    • ❸ 200px× 3/10 = 60px ⇒ 第三项 内容区宽度 = 50px + 60px剩余空间 = 110px
      • 
    • ❹ 200px× 4/10 = 80px ⇒ 第四项 内容区宽度 = 100px + 80px剩余空间 = 180px
      • 

---

2.2 flex-shrink 属性: 设置 伸缩项的 收缩因子 (数字值，默认 等比例收缩 1)

• ⑴ 设置 伸缩项的 收缩因子: flex-shrink 属性，美 /ʃrɪŋk/
  • ① 前提: 伸缩容器的宽度 不足 ⇒ 伸缩项 才发生收缩。
    • ❶ 如果 所有伸缩项的大小之和 大于 伸缩容器，会发生收缩， 伸缩项 将根据 flex-shrink 进行缩小。
    • ❷ 空间不足的时候 ⇒ 伸缩项 缩小的比例。
  • ② 搭配属性:
    • 在使用中，flex-shrink 与 flex-grow 和 flex-basis 一起使用，通常使用 flex 简写 来定义。
  • ③ 收缩的临界值:
    • 默认的 伸缩项 不会缩小到 它们的 最小 内容大小(content size) 以下。
      • 当flex-basis: 0; = 不设置 预设宽高时 ⇒ 显示的 就是伸缩项的 最小 内容大小。
    • 要更改 此设置，需要设置 项目的 最小宽度或最小高度。min-width，min-height。

---

• ⑵ 伸缩项的 收缩因子的 语法和属性值
  • flex : ;
    • ① 属性值: 数字。
    • ② 负值: 无效。
    • ③ 默认值: 为 1。当 伸缩空间不够时，由于 收缩因子 flex-shrink的默认值为1，所以所有 伸缩项 被等比例被压缩。
      • 伸缩项 缩小的比例相同 ⇒ 相当于乘以 同一个百分比 ,现在的宽度 = 各自内容区 × 相同的百分比⇒ 等比例收缩 ≠ 各项收缩的大小一样,而是比例一样。

/*  values */
flex-shrink: 2;
flex-shrink: 0.6;

/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;

---

• ⑶ 收缩因子的 浏览器支持
  • 

---

• 示例1: 设置一段内容的 收缩因子。
  • 未设置 flex-basis,flex-grow。
  • ① 伸缩容器的宽度 不足时 ⇒ 伸缩项 收缩 ⇒ 伸缩项的宽度 和 flex-shrink 成反比。
    • 
  • ② 伸缩容器的宽度 足够时 (width:41%;) ⇒ 伸缩项 不收缩 ⇒ 收缩因子 无效。
    • 
  • ③ 不收缩 flex-shrink: 0; ⇒ 伸缩容器 空间不够时，会溢出。
    • 
  • ④ 等比例收缩
    • ❶ flex-shrink: 1; + 伸缩容器(父元素)的宽度 不足 = width:400px;
    • 收缩比例相同 ⇒ 各伸缩项的 现在的宽度和原宽度的比例 相同
      • 第一项和第三项的宽度比例 = 现在的宽度/原宽度 = 33.3px / 50px = 66.6%
      • 第二项和第四项的宽度比例 = 现在的宽度/原宽度 = 66.6px/ 100px = 66.6%
      • 
      • 
  • ❷ 伸缩项 收缩的临界值
    • flex-basis: 0;时 ⇒ 伸缩项的 最小尺寸。默认的 伸缩项 不会缩小到 它们的 最小 内容大小(content size) 以下。
    • flex-shrink 收缩到这个尺寸后，该 伸缩项 不会再进行 收缩 ⇒ 所以 当某项达到这个值后 其他项还可以收缩时，相比之下 可能就不是等比例的了。
    • 全部都到最小宽度 ⇒ 一样的宽度 (但不是等比例)
    • 
• ⑤ 按比例和权重 进行收缩 ⇒ 根据 各项的总宽度 和 收缩因子
  • 所有伸缩项的 总宽度之和 = 四个元素的 总宽度(含 各项的外边距、边框、内边距) = 100+150+100+150 = 500px
  • 超出量: 伸缩项总宽度之和 - 伸缩容器(父元素)的宽度 width = 500px-450px = 50px
  • 总权重: 各项的收缩因子×各项的总宽度 之和 = 1×100+2×150+3×100+4×150 = 100+300+300+600 = 1300
  • 各项的宽度 = 自身总宽度 - 超出量×(收缩因子×自身总宽度/总权重)
  • 第一项的总宽度 = 100 - 50×(1×100/1300) =100 - 3.846 = 96.154
    • 减少的部分 ⇒ 各伸缩的内容区减少 ，各项的 外边距 、边框、内边距 不变。
    • 第一项的内容区 宽度 = 50px - 3.846 = 46.154,小数点很长,有误差。
      • 
  • 第二项的总宽度 = 150 - 50×(2×150/1300) = 150 - 11.538 = 135.462
    • 
  • 第三项的总宽度 = 100 - 50×(3×100/1300) = 100-11.538 = 88.462
    • 
  • 第四项的总宽度 = 150 - 50×(4×150/1300) = 150 - 23.076 = 126.924
    • 

.flexcontainer div{
    border: dashed 5px lightskyblue;
    padding: 10px;
    margin: 10px;
    flex-shrink: 0;/*即便溢出 也不收缩*/
    flex-shrink: 1;/*伸缩项 缩小的比例相同  ⇒  相当于乘以 同一个百分比  ⇒  等比例收缩 ≠ 各项收缩的大小一样,而是比例一样*/
    flex-shrink: 3;/*伸缩项 缩小的比例相同  ⇒  相当于乘以 同一个百分比  ⇒  等比例收缩 ≠ 各项收缩的大小一样,而是比例一样*/
   /*flex-basis: 0;!*伸缩容器的宽度不足时  ⇒  有剩余空间,所有元素,都按照 相同的最小宽度 处理*!*/
}
.flexitem1{

    flex-shrink: 1;
    flex-basis: 50px;
}
.flexitem2{

    flex-shrink: 2;
	flex-basis: 100px;
}
.flexitem3{

    flex-shrink: 3;
    flex-basis: 50px;

}
.flexitem4{
                    
    flex-shrink: 4;
	flex-basis: 100px;
}

.green{
    background-color: lightgreen;
}

.red{
    background-color: lightpink;
}

---

2.3 flex-basis 属性: 伸缩项的 主轴方向上的初始 宽或高 (假设大小 ，不一定等于真实 宽或高,默认 按照宽高比 auto)

• ⑴ 设置 伸缩项的 主轴方向上的 宽或高 (初始尺寸): flex-basis ，美 /ˈbeɪsɪs/
  • ① 分配空间之前，伸缩项 占据主轴的空间 。
    • 初始尺寸: 元素在flex-grow和 flex-shrink生效前的尺寸。
    • 不一定是 伸缩项内容区 实际空间， 实际占用空间 要考虑父元素的宽度或高度,以及最大/最小宽高。
      • ❶ 横向布局/ 水平书写模式 ⇒ 类似 宽度。
        • 除了auto和content，flex-basis都以与 水平书写模式中 width 相同的方式 解析（除了width值设置为auto，flex-basis设置为 content）。
        • flex-direction取值为 row 时 ⇒ flex-basis 相当于 width。
      • ❷ 纵向布局（即flex-direction取值为column时） ⇒ 类似 高度。
        • flex-basis 对应的值 就和 height 相同。
      • 当书写模式 改变时，相应的取值方式 也会有所改变。
      • 
    • ❶ 根据主轴的方向 ⇒ 父元素 宽度/高度 足够时 + 不分配剩余空间 ⇒ flex-basis = 默认 伸缩项 内容区 实际占用的空间(宽度或高度)。
    • ❷ flex-basis ⇒ 主轴方向的假设大小，并不是 真实大小，其真实大小 取决于 伸缩容器(父元素)的宽度，伸缩项的 min-width,max-width 等。
      • 最大和最小宽高 优先级高于 ＞flex-basis 假设大小 ＞宽高 width / height
  • ② 指定区域: 默认 内容区的大小:
    • 设置 内容框/盒的大小，使用 box-sizing 属性 指定 设置的区域。
      • ❶ 主轴为横向 + 父元素 宽度足够时 ⇒ flex-basis: 70px; +box-sizing: border-box; ⇒ 指定的是 主轴上 边框盒及以内的 宽度，而不是默认的内容区宽度 。
      • 
    • ❷ 主轴为横向 + 父元素 宽度足够时 ⇒ flex-basis: 70px; + 不使用 box-sizing 改变 盒模型 ⇒ 决定了 伸缩项的内容盒（content-box）的尺寸。
      • 
  • ③ 更高 优先级: 如果为一个元素设置了 flex-basis (auto 值除外)和 ❶ width(或 ❷ height —— 对于 flex-direction: column)，则 flex-basis 具有 更高优先级。优先级 高于宽高。
    • width: 40px; + flex-basis: 50px;
    • 主轴为横向 + 父元素空间足够 ⇒ 同时设置时，实际宽度是 flex-basis 的值。
    • 
  • ④ 适用对象
    • 伸缩项, 包括 in-flow pseudo-elements。
    • 元素 不是伸缩项，不起作用。

---

• ⑵ 主轴上 假设/初始大小的 语法和属性值
  • flex-basis: auto | | | content;
  • ① 负值: 无效。
  • ② 默认值: auto。 自动按照 伸缩项 宽或高比例 显示尺寸大小。
  • ③ 根据内容 调整尺寸: content: 宽或高 ⇒ 根据内容 自动调整大小，而不是伸缩项本身的 宽或高比例。
  • ④ flex-basis:0 和 flex-basis:auto的区别。
    • flex-basis ⇒ 指定 初始尺寸，当设置为0时（绝对 弹性元素），此时相当于告诉 flex-grow和 flex-shrink 在伸缩的时候 不需要考虑 元素的尺寸；
      • 绝对弹性元素 如果 flex-grow值 是一样的话，那么他们的尺寸 一定是一样的。
    • 设置为auto时（相对 弹性元素） ⇒ 需要在伸缩时 考虑 元素尺寸。
  • ⑤ 其他属性值: min-content/ max-content
    • 最小 内容尺寸: min-content
      • 文本已尽可能抓住机会来 ❶ 自动换行, 变得 ❷ 尽可能小 且❸ 没有溢出。
      • 
    • 最大 内容尺寸: max-content
      • 会变得 ❶ 尽可能大, 没有自动换行的机会. 如果 伸缩容器太窄， 它就会溢出其自身的盒子。(此处因为 默认的等比例压缩 flex-shrink:1; ⇒ 没有溢出)
      • 

/* 长度值/关键字 */
flex-basis: 10em;      
flex-basis: 3px;
flex-basis: auto;

/* 内在/固有的尺寸关键字 Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* 根据伸缩项的内容 自动调整大小 */
flex-basis: content;

/* 全局值 Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

---

• ⑶ 浏览器支持
  • 需要浏览器前缀 -webkit-
  • 

---

.flexcontainer div{
    border: dashed 5px lightskyblue;
    padding: 10px;
    margin: 10px;
    flex-basis: auto;/*伸缩容器的宽度不足时  ⇒  无剩余空间*/
    flex-basis: content;/*伸缩容器的宽度不足时  ⇒  无剩余空间*/
    flex-basis: 0;/*伸缩容器的宽度不足时  ⇒  有剩余空间,所有元素,都按照 相同的最小宽度 处理*/
    flex-basis: 100px;/*按照相同比例,分配空间*/
    flex-basis: 300px;/*按照相同比例,分配空间*/
}

• ① 伸缩项 都设置为: flex-basis: auto;
  • ❶ 各项 都不设置宽度时 ⇒ flex-basis: auto; = flex-basis: content; ⇒ 按照宽或高比例 = 按照内容。
    • flex-basis: auto; ⇒ 分配空间 ⇒ 根据 伸缩项的宽高 ⇒ 按照各项的 宽width或高height 之间的比例 ⇒ 自动调整各个伸缩项的 内容区的宽度 ⇒ 分配 伸缩容器( 父元素)中的 空间。
    • 父元素的(内容区)宽度 = 所有 伸缩项的外边距+边框+内边距+宽度 (不含 父元素的内边距)
  • 

.flexitem1{
    width: 50px;
}
.flexitem2{
    width: 100px;
}

• ② 设置 伸缩项的宽度: 第一项和第二项的 宽度比例是1:2,则分配空间时， 伸缩项的内容区width的比例,也是1:2

  • ❶ flex-basis: auto;如下，按照宽度的比例 分配 伸缩项的内容区的宽度。
  • 
  • 注意: 宽高比 ⇒ 默认 是伸缩项的 内容区的比例。
  • 第一项的内容区宽度
    • 
  • 第二项的 内容区的宽度
    • 

• ❷ flex-basis: content;

  • 即使 设置宽高比 1:2 ⇒ 分配父元素的空间 ⇒ 根据内容,而不是伸缩项本身的宽高 ⇒ 宽高不影响 分配空间的比例 ⇒ 第一项和第二项内容区宽度 相同 (文本内容一样多)
  • 

• ③ 伸缩项 都设置为: flex-basis: 0;

  • 无假设大小 ⇒ 即使 伸缩容器的宽度不足时 ⇒ 也会空出 一部分剩余空间 ⇒ 所有元素,都按照 最小的 相同宽度处理。
  • 

• ④ 伸缩项 都设置为 相同值: flex-basis: 100px;

  • 无剩余空间 ⇒ 按照相同比例 分配空间。
  • 伸缩项的内容区宽度 ⇒ 都是相同的。
  • 

.flexitem1{
    flex-basis: 50px;
}
.flexitem2{
    flex-basis: 100px;/*父元素宽度足够时 等于此值,父元素的宽度不够时，元素的宽度实际值 并不是此值*/
}
.flexitem3{
    flex-basis: 50px;
}
.flexitem4{

    flex-basis: 100px;
}

• ⑤ 设置为不同值+ 主轴横向+ 伸缩容器(父元素)宽度不够 ⇒ 相当于 伸缩项 内容区的宽度之比: 1:2:1:2

  • 

• ⑥ 伸缩项的 最大宽度 max-width + 最小宽度min-width和 假设大小

  • 最大和最小宽度 优先级 高于 假设大小 flex-basis
    • ❶ 主轴为横向 + 父元素空间分配后 宽度大于最大宽度 ⇒ 实际宽度 = 最大宽度max-width
    • ❷ 主轴为横向 + 父元素空间分配后 宽度小于最小宽度 ⇒ 实际宽度 = 最小宽度min-width
    • 

    min-width: 60px;
    flex-basis: 55px;

---

3. flex-flow 属性: 同时设置 主轴方向和 伸缩项的换行 (简写属性)

• ⑴ 同时设置 主轴方向和 伸缩项的换行: flex-flow ， 美 /floʊ/ ，流向
  • 简写属性: 是以下子属性的 简写属性。(子属性和初始值)
    • ① 主轴方向 和 伸缩项排列方向: flex-direction: row
      • flex-direction: row | row-reverse | column | column-reverse;
      • ❶ 正文本方向 / ❷ 反文本方向 / ❸ 正块轴方向 / ❹ 反块轴方向
    • ② 伸缩项的换行: flex-wrap: nowrap
      • flex-wrap: nowrap | wrap | wrap-reverse;
      • ❶ 不换行 / ❷ 换行 / ❸ 换行+换交叉轴的起始点。
  • 适用对象
    • 伸缩容器 (flex containers)

---

• ⑵ 语法
  • flex-flow: <'flex-direction'> || <'flex-wrap'>;

---

• ⑶ 合法属性值

/* 只设置 主轴方向和伸缩项的 排列方向 flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* 只设置 伸缩项的换行 flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/* 同时设置 flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/* 全局值 Global values */
flex-flow: inherit;
flex-flow: initial;
flex-flow: unset;

---

• ⑷ 浏览器支持
  • 需要浏览器前缀 -webkit-
  • 

---

3.1 flex-direction 属性: 设置 主轴方向 和 伸缩项排列方向 (用于 伸缩容器，默认值 正文本方向 )

• ⑴ 设置 主轴方向 和 伸缩项排列方向: flex-direction
  • 设置在 伸缩容器(flex container)中 放置 伸缩项(flex items)的方式，定义了 主轴的方向和伸缩项的 排列方向(正方向或反方向reverse)。
  • ① 搭配属性1: dir 属性
    • 值 row 和 row-reverse 受 伸缩容器的 方向性 的影响。
    • 从左到右: 如果它的 dir 属性是 ltr
      • row表示从左到右 定向的水平轴，而 row-reverse 表示 从右到左;
    • 从右到左: 如果 dir属性是 rtl
      • row表示 从右到左 定向的水平轴，而 row-reverse表示 从左到右。
  • ② 搭配属性2: 书写模式 writing-mode 属性
    • 书写模式 writing-mode不同 ⇒ 主轴方向 和 伸缩项排列方向 也不同。
  • ③ 适用对象
    • 伸缩容器 (flex containers)
    • 父级元素上 使用 display属性的值：❶ flex或 ❷ inline-flex ⇒ 这个父元素 = 伸缩容器。

---

.flexcontainer {
    border: solid 5px lightseagreen;
    width:700px;
    /*width:500px;*/
    /*width: 450px;*/
    margin: 10px;
    padding: 10px;
    font-weight: bold;
    
    /* 该元素 设置为 伸缩容器*/    
    display: flex;
    
    /*主轴和方向*/
    flex-direction: row;/*正文本方向,水平书写模式下*/
    /*flex-direction: row-reverse;!*反文本方向,水平书写模式下*!*/
    /*flex-direction: column;!*正块轴方向,水平书写模式下*!*/
    /*flex-direction: column-reverse;!*反块轴方向,水平书写模式下*!*/
    /*writing-mode: horizontal-tb;!*前面指定 ❶ 内联级内容 / 文本 的 主方向 + 后面指定 ❷ 块流方向和文本换行方向*!*/
    /*writing-mode: vertical-lr;*/
    /*writing-mode: vertical-rl;*/

}

• ⑵ 主轴和伸缩项方向的 语法和属性值 (示例图 代码见上方)

  • flex-direction: row | row-reverse | column | column-reverse;

    • ❶ 正文本方向 / ❷ 反文本方向 / ❸ 正块轴方向 / ❹ 反块轴方向
      • 正文本方向 ⇒ 看文本方向。
      • 正块轴方向 ⇒ 看块轴方向。

  • ★ 书写模式 writing-mode不同 ⇒ 主轴也不同。

    • 查看详情: 【CSS 书写模式 (Writing modes )】

  • ① 正文本方向 (默认值): row

    • 伸缩容器的主轴 被定义为 与文本方向相同。
    • 主轴起点和主轴终点 与内容方向相同 ⇒ 伸缩项的 排列方向 与文本方向 相同。
    • ❶ writing-mode: horizontal-tb;(默认值) ⇒ 文本水平 ⇒ 水平主轴 +从左到右
      • 前面指定 ❶ 内联级内容 / 文本 的 主方向 + 后面指定 ❷ 块流方向和文本换行方向。(整体靠上)
      • 主轴起点: 如果有 剩余空间，会显示在 右边，因为伸缩项 从左向右 排列的 ⇒ 左边 是主轴起点。
      • 
      • 
    • ❷ writing-mode: vertical-lr; ⇒ 文本垂直 ⇒ 垂直主轴+从上往下。(整体靠左)
    • 
    • ❸ writing-mode: vertical-rl; ⇒ 文本垂直 ⇒ 主轴垂直+ 从上往下 (整体靠右)
    • 

  • ② 反文本方向: row-reverse

    • 表现和 row相同。
    • 置换了 主轴起点和主轴终点 ⇒ 伸缩项的 排列方向。
    • ❶ writing-mode: horizontal-tb; ⇒ 文本水平 ⇒ 水平主轴 + (反文本方向 = 从右到左排列) ⇒ 伸缩项的 排列顺序 也反过来了。
      • 主轴起点: 如果有 剩余空间，会显示在 左边，因为伸缩项 从右向左 排列的 ⇒ 右边 是主轴起点。
      • 
      • 
    • ❷ writing-mode: vertical-lr; ⇒ 文本垂直 +反向 ⇒ 垂直主轴+从下往上。
    • 
    • ❸ writing-mode: vertical-rl; ⇒ 文本垂直 +反向 ⇒ 主轴垂直+ 从下往上 (整体靠右)
      • 

  • ③ 正块轴方向: column

    • 伸缩容器的主轴 和块轴相同。
    • 主轴起点与主轴终点 和 书写模式的 块轴前后点 相同 ⇒ 伸缩项的 排列方向 与块轴方向相同。
    • ❶ writing-mode: horizontal-tb;(默认值) ⇒ 块流方向垂直+ 从上往下 ⇒ 垂直主轴 +伸缩项 从上往下 。(文本靠上)
      -
    • ❷ writing-mode: vertical-lr; ⇒ 块轴水平 +从左向右 ⇒ 水平主轴+ 伸缩项 从左向右。(文本靠左)
      • 
    • ❸ writing-mode: vertical-rl; ⇒ 块轴方向 水平 ⇒ 水平主轴 + 伸缩项 从右到左 (文本靠右)
      • 

  • ④ 反块轴方向: column-reverse

    • 表现和column相同，但是置换了主轴起点和主轴终点 ⇒ 伸缩项的 排列方向 与块轴方向 相反。
    • ❶ writing-mode: horizontal-tb;(默认值) ⇒ 块流方向垂直 从上往下+反向 ⇒ 垂直主轴 +伸缩项 从下往上 (文本靠上) ⇒ 伸缩项的 排列顺序 发生了改变。
      • 
    • ❷ writing-mode: vertical-lr; ⇒ 块轴水平 +反向 ⇒ 水平主轴+ 伸缩项从右向左。(文本靠左)
      • 
    • ❸ writing-mode: vertical-rl; ⇒ 块轴方向 水平 ⇒ 水平主轴 + 伸缩项 从左到右 (文本靠右)
      • 

• ⑶ 合法值

/* 正文本方向 */
flex-direction: row;

/* 反文本方向 */
flex-direction: row-reverse;

/* 正块轴方向/文本换行方向 */
flex-direction: column;

/* 反块轴方向 */
flex-direction: column-reverse;

/* 全局值 Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

---

• ⑷ 主轴方向和 伸缩项排列方向的 浏览器支持
  • 需要浏览器前缀 -webkit-(chrome)，-ms-(IE)
  • 

---

3.2 flex-wrap 属性: 设置 伸缩容器中 伸缩项的换行 (用于 伸缩容器, 默认不换行 nowrap)

• ⑴ 设置 伸缩容器中 伸缩项的换行: flex-wrap，美 /ræp/
  • ① 换行和换行方向: 设置 伸缩项是 强制放在一行上，还是可以放在 多行上。
    • 如果允许换行，它将设置 行堆叠的方向 = 换行方向。
  • ② 适用对象
    • 伸缩容器 (flex containers) ⇒ 用在伸缩容器上 ，但影响的是 伸缩容器内部的 多个伸缩项 溢出容器时的 换行。
    • 父级元素上 使用 display属性的值：❶ flex或 ❷ inline-flex ⇒ 这个父元素 = 伸缩容器。

---

.flexcontainer {
    border: solid 5px lightseagreen;
    /*width:700px;*/
    /*width:500px;*/
    width: 450px;
    /*height: 500px;*/
    margin: 10px;
    padding: 10px;
    display: flex;
    
    font-weight: bold;
    flex-wrap: nowrap;
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;


}

• ⑵ 伸缩项换行的 语法和属性值(示例图 代码如上)
  • flex-wrap: nowrap | wrap | wrap-reverse;
    • ❶ 不换行 / ❷ 换行 / ❸ 换行+换交叉轴的起始点
  • ① 不换行 (默认值): nowrap
    • ❶ 所有伸缩项 被放在一行中，这可能导致 溢出伸缩容器 。
      • flex-wrap: nowrap;
        • 
    • ❷ 根据 主轴方向 flex-direction 的值 ⇒ cross-start 会相当于 start 或 before。
      • 
  • ② 换行: wrap
    • ❶ 伸缩项 可分成多个行。
    • ❷ 根据 主轴方向 flex-direction 的值 ⇒ cross-start 会选择等于 start 或 before
      • cross-end 为确定的 cross-start 的另一端。
      • 
  • ③ 换行+换起点和换行方向: wrap-reverse
    • 交叉轴的起点和终点 互换: 和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。
    • 

---

• ⑶ 伸缩容器中的 伸缩元素(伸缩项)的 初始状态
  • ① 主轴方向: 元素 排列为一行 ⇔ 默认值 flex-direction: row + 水平书写模式 writing-mode:horizontal-tb;。
    • 排列起点: 元素从主轴的起始线 开始排列。
      • 书写英文: 那么主轴的起始线是左边，终止线是右边。
      • 书写阿拉伯文: 那么主轴的起始线是右边，终止线是左边。
  • ② 默认 按宽度比例显示 ⇔ flex-basis: auto + 水平书写模式 writing-mode:horizontal-tb;
    • 有宽度，按照宽度比例
    • 如果没有给元素 设定尺寸，flex-basis 的值 采用元素 内容的尺寸。
  • ③ 默认 不换行，可能溢出 ⇒ flex-wrap :nowrap。
  • ④ 元素不会在 主轴方向拉伸，但是可以缩小。 ⇔ (默认值 flex-grow:0;、flex-shrink:1;)
  • ⑤ 元素被拉伸来 填充交叉轴大小 ⇔ 交叉轴方向 会拉伸
    • 如果一些元素比其他元素高，那么元素 会沿交叉轴被拉伸 来填满它的大小。
• 总结: 默认 横向主轴，伸缩项 排成一行+ 主轴上 默认按照宽度比例显示 + 主轴方向 元素不分配剩余空间+ 只会在空间不足时 等比例缩小+ 且不换行 可能溢出+ 交叉轴方向 会拉伸 适应最高的元素。
• 

---

• ⑷ 伸缩项 换行的 浏览器支持
  • 需要浏览器前缀 -webkit-
  • IE: 部分支持，因为存在很多的bug。
  • 

---

4. order 属性: 设置 伸缩容器 或 网格容器中 项目(子元素)的 排列顺序 (正负整数值,默认值 0, 用于伸缩项/项目 本身)

• ⑴ 设置 伸缩容器 或 网格容器中 项目(子元素)的 布局/排列顺序: order
  • ① 布局顺序
    • 升序 布局: 容器中的项目 按照 order 属性的值的增序/升序 进行布局。 ⇒ 数字越大 ⇒ 元素的位置 越靠后。
    • 源代码顺序 布局: 拥有相同 order 属性值的元素 ⇒ 按照 在源代码中 出现的顺序 进行布局。
  • ② 影响的顺序:
    • order 仅仅对元素的 ❶ 视觉顺序 (visual order) 产生作用，并不会影响元素的 ❶ 逻辑或 ❷ 制表符tab 顺序。
    • order 不可以用于 非视觉媒体，例如 语音speech。
  • ③ 适用对象
    • ❶ 伸缩项 (flex items) 和 ❷ 绝对定位的 伸缩容器的子元素 (absolutely-positioned flex container children)

---

• ⑵ 项目顺序的 语法和属性值
  • order: ;
  • ① 属性值: 整数值 (可正可负)。 ⇒ 数字越大 ⇒ 位置越靠后 (反比关系)。
    • CSS 数据类型是一种特殊的 数值类型，它表示一个 整数，可以是正数 或负数。
  • ② 初始值 (Initial value): 0
  • ③ 继承性(Inherited): no

/* 正负 整数值  values */
order: 5;
order: -5; 

/* 全局值 Global values */
order: inherit;
order: initial;
order: unset;

---

• ⑶ 项目顺序的 浏览器支持
  • 需要浏览器前缀 -webkit-，-ms-(IE)
  • 

---

.flexcontainer {
    border: solid 5px lightseagreen;
    width:700px;
    /*width:500px;*/
    margin: 10px;
    padding: 10px;
    font-weight: bold;    
    
    display: flex;
    /*主轴和方向*/
    /*flex-direction: row;!*正文本方向,水平书写模式下*!*/
    flex-direction: row-reverse;/*反文本方向,水平书写模式下*/
}
.flexcontainer div {
    border: dashed 5px lightskyblue;
    padding: 10px;
    margin: 10px;
}
.flexitem1 {
    width: 50px;
    /*order: 1;!*数字越大，位置越靠后*!*/
    /*order: 0;*/
    /*order: -1;*/

}

.flexitem2 {
    width: 100px;
    /*order: 2;*/
}

.flexitem3 {
    width: 50px;
    /*order: 3;*/
    /*order: 4;*/

}

.flexitem4 {
    width: 100px;
    /*order: 4;*/
}

• 示例1: 给伸缩项 设置排列顺序 (代码如上)
• ① 默认显示: 默认都是 order:0; ，顺序值相同 ⇒ 按照在 代码中的位置 前后排序。
  • 

---

• ② order顺序 数字值 最大的 ⇒ 排列在 最后面。
  • 

.flexitem1 { 
	width: 50px;
	order: 1;/*数字越大，位置越靠后*/
}

---

• ③ 数字 较大的 ⇒ 排列在 较后方。
  • 
• +反文本方向+ 水平书写模式下: flex-direction: row-reverse;
  • ❶ 执行order的排序 ⇒ 文本排序完毕后 ⇒ 根据文本方向 ⇒ ❷ 再 确定主轴方向 和 伸缩项的排列方向。
  • ❷ 主轴起点和排序: flex-direction 指定的是 最终的 主轴方向 和 伸缩项的 最终排列方向 ⇒ 反向了 ⇒ 主轴起点 在右边 ⇒ 从文本流向看 仍然是 数字大的 在后方
    • ⇒ order排序 和 flex-direction 排序 不冲突。
    • 

.flexitem1 {
    width: 50px;
    order: 1;/*数字越大，位置越靠后*/
    /*order: 0;*/
    /*order: -1;*/

}

.flexitem2 {
    width: 100px;
    order: 2;
}

---

• ④ 项目的顺序值 可以为负+ 较大值 排在后方。
  • 

.flexitem1 {
    width: 50px;
    order: 1;/*数字越大，位置越靠后*/
    /*order: 0;*/
    /*order: -1;*/

}

.flexitem2 {
    width: 100px;
    order: 2;
}

.flexitem3 {
    width: 50px;
    order: 3;
    /*order: 4;*/

}

.flexitem4 {
    width: 100px;
    order: -4;
}

---

---

♣ 结束语 和 友情链接

• 参考文档
  • CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN
  • CSS Flexible Box Layout Module Level 1

---

• 友情链接

  • 【CSS 单位 (详细介绍)】
  • 【CSS 书写模式 (Writing modes )】
  • CSS Box Sizing Module Level 3

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

---

• 支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
  • 可以备注 支持的理由 或 想对作者说的话哦~
    
• 赞助二维码:
  

---

• 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/103495153
  • 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！