CSS 弹性盒子布局 Flexible Box Layout

  • CSS 弹性盒子布局 (Flexible Box Layout)
    • 1. 弹性盒子布局的 基本概念和术语
    • 2. flex 属性: 设置 伸缩项的 伸缩性和比例 (简写属性，用于伸缩项)
      • 2.1 flex-grow 属性: 伸缩项 主轴上的 宽或高的 剩余空间的分配和比例 ( 数字值，默认不分配 0)
      • 2.2 flex-shrink 属性: 设置 伸缩项的 收缩因子 (数字值，默认 等比例收缩 1)
      • 2.3 flex-basis 属性: 伸缩项的 主轴方向上的初始 宽或高 (假设大小 ，不一定等于真实 宽或高,默认 按照宽高比 auto)
    • 3. flex-flow 属性: 同时设置 主轴方向和 伸缩项的换行 (简写属性)
      • 3.1 flex-direction 属性: 设置 主轴方向 和 伸缩项排列方向 (用于 伸缩容器，默认值 正文本方向 )
      • 3.2 flex-wrap 属性: 设置 伸缩容器中 伸缩项的换行 (用于 伸缩容器, 默认不换行 nowrap)
    • 4. order 属性: 设置 伸缩容器 或 网格容器中 项目(子元素)的 排列顺序 (正负整数值,默认值 0, 用于伸缩项/项目 本身)
  • ♣ 结束语 和 友情链接

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: <number>;(数字，不带单位)
        • 默认值为0，负值无效。
      • ❷ 主轴上 收缩比例: flex-shrink
        • 语法: flex : <number>; (数字，不带单位)
        • 默认值为1，负值无效。
      • ❸ 主轴上 假设大小 (宽或高)flex-basis
        • 语法: flex-basis: auto | <length> | <percentage>| 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
    • ① 单值语法: 值必须为以下其中之一
      • ❶ 一个无单位 数字(<number>): 被当作<flex-grow>的值 ⇒ 剩余空间分配。

        • ★ 相当于 ⇒ flex: <number> 1 0px;

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

        • 数字(无单位) →数字(无单位) → 有效宽度值 (数字带单位，百分比值，关键字值)
      • ❶ 第一个值 必须为一个 无单位数 ⇒ 会被当作 <flex-grow> 的值。
      • ❷ 第二个值 必须为一个 无单位数 ⇒ 会被当作 <flex-shrink> 的值。
      • ❸ 第三个值 必须为一个 有效的宽度值 ⇒ 会被当作 <flex-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: <number>;

      • ① 属性值: 数字。
      • ② 负值: 无效。
      • ③ 默认值: 为 0。该元素不分配 父元素的剩余空间，如果值大于0，表示分配。值越大，分配的剩余空间越多。
/* 数字值 <number> 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 : <number>;

      • ① 属性值: 数字。
      • ② 负值: 无效。
      • ③ 默认值: 为 1。当 伸缩空间不够时，由于 收缩因子 flex-shrink的默认值为1，所以所有 伸缩项 被等比例被压缩。
        • 伸缩项 缩小的比例相同 ⇒ 相当于乘以 同一个百分比 ,现在的宽度 = 各自内容区 × 相同的百分比⇒ 等比例收缩 ≠ 各项收缩的大小一样,而是比例一样。
/* <number> 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 | <length> | <percentage>| 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: <integer>;
    • ① 属性值: 整数值 (可正可负)。 ⇒ 数字越大 ⇒ 位置越靠后 (反比关系)。
      • <integer> CSS 数据类型是一种特殊的 数值<number>类型，它表示一个 整数，可以是正数 或负数。
    • ② 初始值 (Initial value): 0
    • ③ 继承性(Inherited): no
/* 正负 整数值 <integer> 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
    • 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！

【CSS 弹性盒子布局 (Flexible Box Layout)】相关推荐

  1. CSS弹性盒子布局——flex布局的基本概念

    <CSS弹性盒子布局--flex布局的基本概念> Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的子元素之间提供了强大的空间分布和 ...

  2. CSS 弹性盒子布局使用方法介绍

    标题 CSS 弹性盒子布局 CSS 属性 应用在父容器元素上的CSS属性 1.display: flex | inline-flex; 2. flex-direction 3. flex-wrap 4 ...

  3. CSS 弹性盒子布局详解

    CSS 弹性盒子 弹性盒子是CSS3的一种新布局模式.是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 弹性盒子布局是一种在前端HTML开发中比较常用的布局方式,还有 ...

  4. CSS弹性盒子布局flex

    flex布局: flex布局是继标准流布局.浮动布局.定位布局后的第四种布局方式.这种方式可以非常优雅的实现子元素居中或均匀分布,甚至可以随着窗口缩放自动适应.flex布局在浏览器中存在一定的兼容性( ...

  5. CSS布局之“弹性盒子布局”

    弹性盒子,通常被称为 flexbox,是一种一维的布局模型.它给弹性元素提供了强大的空间分布和对齐能力,极大的方便了网页的布局和美化. 目录 前言 一.弹性盒子概述 二.弹性盒子组成 三.弹性容器(F ...

  6. css 弹性盒子 flex布局

    目录 css弹性盒子flex 布局 什么是flex 常见父项属性 概念与案例 主轴与侧轴 flex-direction设置主轴的方向 justify-content 设置主轴上的子元素排列方式 fle ...

  7. CSS3 - 使用弹性盒子（Flex Box）实现完美居中、栅格系统及响应式布局

    CSS3弹性盒子介绍 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的 ...

  8. html弹性盒子布局,div+css3弹性盒子(flex box)布局

    一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...

  9. HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)

    文章目录 (1)Flex弹性盒子布局 一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值 设置子项的布局方向(写在父容器上) 3. ...

最新文章

  1. 优化SQl语句的十个重要步骤
  2. mysql 8.0找不到my.ini配置文件解决方案
  3. 亿级流量电商详情页系统实战：缓存架构+高可用服务架构+微服务架构
  4. CF1028F. Make Symmetrical
  5. mysql排序加权_mysql多关键词查询相关匹配加权排序
  6. html border阴影效果_【开发小技巧】026—如何使用HTML和CSS创建浮动框阴影效果？...
  7. CCF202012-2 期末预测之最优阈值
  8. Kotlin学习系列(二)
  9. 安装chrome插件
  10. 云原生开发环境初探 | CSDN 博文精选
  11. 可实现“一台主机多人同用”的 Windows MultiPoint Server 2011 中文正式版
  12. Crnn中文end-to-end识别
  13. php7与mysql相关配置_PHP7连接mysql，文件配置问题
  14. 制作1G的U盘启动盘
  15. easydarwin 安装_使用EasyDarwin搭建流服务器
  16. java 时间转化成数字_Java将日期转化为大写格式（阿拉伯大写数字）
  17. 【ftp上传文件失败】put: Access failed: 553 Could not create file. (passwd)（接详细配置1问题解决）
  18. 电脑桌面上文件夹图标右上角有双箭头
  19. 实用机器学习-学习笔记
  20. htc android sd卡,【HTC T328W】Android系统中SD卡各文件夹功能详解

热门文章

  1. python数据驱动：基于ddt的数据驱动测试
  2. 数据挖掘软件weka
  3. easyui隔行变色
  4. HTML table标签实现表头固定
  5. 机械转行前端，我的过去和期待
  6. bison invalid @ in skeleton: @ 错误
  7. 关于126、163 网易邮箱发送邮件示例
  8. 外部app扫码进入自己app的下载页面
  9. OpenSSL v0.9.8a随机数发生器分析（合集）
  10. 牛客 OR175.物流中转站 ---＞超详细解答