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

最新推荐文章于 2024-06-14 09:42:20 发布

Hey_Coder

最新推荐文章于 2024-06-14 09:42:20 发布

阅读量675

点赞数 2

分类专栏：【CSS】文章标签：弹性盒子布局 flex属性 flex-flow属性 order属性伸缩容器和伸缩项

本文链接：https://blog.csdn.net/VickyTsai/article/details/103495153

版权

【CSS】专栏收录该内容

28 篇文章 3 订阅

订阅专栏

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: <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>

.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>

.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

友情链接

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

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

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

在这里插入图片描述

Hey_Coder

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
【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 属性: 伸缩项的主轴方向上的初始宽或高 (假设大小，不一定等于真实
复制链接

扫一扫