简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >flex--弹性布局

flex--弹性布局

路亚
路亚原创
2020年04月10日 16:10:07673浏览
总结：今天学习flex 弹性布局，感觉听蒙了，经过课程回放，稍微消化了一点点，还是不够熟练。本来准备想简单的去模仿一个别的站点的页面，结果无从下手

flex 布局概述

1. flex 是什么

  • flex 是 Flexible Box 的缩写,意为弹性布局
  • flex 2009 年就已出现,浏览器兼容性很好,请放心使用

2. flex 解决了什么问题

  • 块元素的垂直居中, flex 可以轻松解决
  • 元素大小在容器中的自动伸缩,以适应容器的变化,特别适合移动端布局

3. flex 项目的布局方向是什么

  • 一个物体在一个平面中, 要么水平排列, 要么垂直排列, flex 借鉴了这个思想
  • flex 是一维布局, 项目任何时候只能沿一个方向排列,要么水平, 要么垂直
  • flex 项目排列的方向, 称为主轴, 水平和垂直二种
  • 与主轴垂直的称为交叉轴(有的教程也称之为副轴/侧轴)

4. flex 布局中常用术语有哪些(三个二)

序号 简记 术语
1 二成员 容器和项目(container / item)
2 二根轴 主轴与交叉轴(main-axis / cross-axis)
3 二根线 起始线与结束线(flex-start / flex-end)

5.flex 容器属性有哪些

序号 属性 描述
1 flex-direction 设置容器中的主轴方向: 行/水平方向, 列/垂直方向
2 flex-wrap 是否允许创建多行容器,即 flex 项目一行排列不下时, 是否允许换行
3 flex-flow 简化 flex-direction, flex-wrap 属性
4 justify-content 设置 flex 项目在主轴上对齐方式
5 align-items 设置 flex 项目在交叉轴上对齐方式
6 align-content 多行容器中,项目在交叉轴上的对齐方式

6. flex 项目属性有哪些

序号 属性 描述
1 flex-basis 项目宽度: 项目分配主轴剩余空间之前, 项目所占据的主轴空间宽度
2 flex-grow 项目的宽度扩展: 将主轴上的剩余空间按比例分配给指定项目
3 flex-shrink 项目的宽度收缩: 将项目上多出空间按比例在项目间进行缩减
4 flex 是上面三个属性的简化缩写: flex: flex-grow flex-shrink flex-basis
5 align-self 单独自定义某个项目在交叉轴上的对齐方式
6 order 自定义项目在主轴上的排列顺序,默认为 0,书写顺序,值越小位置越靠前

flex 容器与项目

1. display属性

序号 属性值 描述 备注
1 flex; 创建 flex 块级容器 内部子元素自动成为 flex 项目
2 inline-flex; 创建 flex 行内容器 内部子元素自动成为 flex 项目

2. flex 容器与项目特征

序号 容器/项目 默认行为
1 容器主轴 水平方向
2 项目排列 沿主轴起始线排列(当前起始线居左)
3 项目类型 自动转换”行内块级”元素,不管之前是什么类型
4 容器主轴空间不足时 项目自动收缩尺寸以适应空间变化,不会换行显示
5 容器主轴存在未分配空间时 项目保持自身大小不会放大并充满空间

1 效果展示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       /* 容器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 150px;
  12.         display: flex;
  13.         /* display: inline-flex; */
  14.       }
  16.       /* 子元素 */
  17.       .item {
  18.         width: 100px;
  19.         height: 50px;
  20.         background-color: fuchsia;
  21.         font-size: 1.5rem;
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <div class="container">
  27.       <div class="item">1</div>
  28.       <div class="item">2</div>
  29.       <div class="item">3</div>
  30.       <div class="item">4</div>
  31.     </div>
  32.     <div class="container">
  33.       <div class="item">1</div>
  34.       <div class="item">2</div>
  35.       <div class="item">3</div>
  36.       <div class="item">4</div>
  37.     </div>
  38.   </body>
  39. </html>

flex 容器主轴方向

1. flex-direction属性

序号 属性值 描述
1 row默认值 主轴水平: 起始线居中,项目从左到右显示
2 row-reverse 主轴水平:起始线居右, 项目从右向左显示
3 column 主轴垂直: 起始线居上,项目从上向下显示
4 column-reverse 主轴垂直: 起始线居下,项目从下向上显示

2 效果展示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>主轴方向</title>
  7.     <style>
  8.       /* 容器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 150px;
  12.         display: flex;
  13.         /* display: inline-flex; */
  14.       }
  15.       .container {
  16.         flex-direction: row;
  17.         flex-direction: row-reverse;
  18.         flex-direction: column;
  19.         flex-direction: column-reverse;
  20.       }
  22.       /* 子元素 */
  23.       .item {
  24.         width: 100px;
  25.         height: 50px;
  26.         background-color: fuchsia;
  27.         font-size: 1.5rem;
  28.       }
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <div class="container">
  33.       <div class="item">1</div>
  34.       <div class="item">2</div>
  35.       <div class="item">3</div>
  36.       <div class="item">4</div>
  37.     </div>
  38.   </body>
  39. </html>

flex 容器主轴项目换行

1. flex-wrap属性

序号 属性值 描述
1 nowrap默认值 项目不换行: 单行容器
2 wrap 项目换行: 多行容器,第一行在上方
3 wrap-reverse 项目换行: 多行容器,第一行在下方

3 效果展示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>主轴方向</title>
  7.     <style>
  8.       /* 容器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 150px;
  12.         display: flex;
  13.         /* display: inline-flex; */
  14.       }
  15.       .container {
  16.         flex-direction: row;
  17.         /* flex-direction: row-reverse; */
  18.         /* flex-direction: column; */
  19.         /* flex-direction: column-reverse; */
  20.       }
  21.       .container {
  22.         flex-wrap: wrap;
  23.         flex-wrap: nowrap;
  24.         flex-wrap: wrap-reverse;
  25.       }
  27.       /* 子元素 */
  28.       .item {
  29.         width: 100px;
  30.         height: 50px;
  31.         background-color: fuchsia;
  32.         font-size: 1.5rem;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <div class="container">
  38.       <div class="item">1</div>
  39.       <div class="item">2</div>
  40.       <div class="item">3</div>
  41.       <div class="item">4</div>
  42.     </div>
  43.   </body>
  44. </html>

flex 容器主轴与项目换行简写

1. flex-flow属性

  • flex-flow是属性flex-direction和flex-wrap的简写
  • 语法: flex-flow: flex-direction flex-wrap
属性值 描述
row nowrap默认值 主轴水平, 项目不换行

4 以后推荐只用它

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>主轴方向是否换行的简写</title>
  7.     <style>
  8.       /* 容器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 150px;
  12.         display: flex;
  13.         /* display: inline-flex; */
  14.       }
  16.       .container {
  17.         flex-flow: row nowrap;
  18.         flex-flow: row wrap;
  19.         flex-flow: column nowrap;
  20.         flex-flow: column wrap;
  21.       }
  23.       /* 子元素 */
  24.       .item {
  25.         width: 100px;
  26.         height: 50px;
  27.         background-color: fuchsia;
  28.         font-size: 1.5rem;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div class="container">
  34.       <div class="item">1</div>
  35.       <div class="item">2</div>
  36.       <div class="item">3</div>
  37.       <div class="item">4</div>
  38.     </div>
  39.   </body>
  40. </html>

flex 容器主轴项目对齐

1. justify-content属性

当容器中主轴方向上存在剩余空间时, 该属性才有意义

序号 属性值 描述
1 flex-start默认 所有项目与主轴起始线对齐
2 flex-end 所有项目与主轴终止线对齐
3 center 所有项目与主轴中间线对齐: 居中对齐
4 space-between 两端对齐: 剩余空间在头尾项目之外的项目间平均分配
5 space-around 分散对齐: 剩余空间在每个项目二侧平均分配
6 space-evenly 平均对齐: 剩余空间在每个项目之间平均分配

5

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>主轴方向对齐方式</title>
  7.     <style>
  8.       /* 容器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 150px;
  12.         display: flex;
  13.         /* display: inline-flex; */
  14.       }
  16.       .container {
  17.         justify-content: flex-start;
  18.         justify-content: flex-end;
  19.         justify-content: center;
  20.         justify-content: space-around;
  21.         /* justify-content: space-between; */
  22.         justify-content: space-evenly;
  23.       }
  25.       /* 子元素 */
  26.       .item {
  27.         width: 50px;
  28.         height: 50px;
  29.         background-color: fuchsia;
  30.         font-size: 1.5rem;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="container">
  36.       <div class="item">1</div>
  37.       <div class="item">2</div>
  38.       <div class="item">3</div>
  39.       <div class="item">4</div>
  40.     </div>
  41.   </body>
  42. </html>

flex 容器交叉轴项目对齐

1. align-items属性

  • 该属性仅适用于: 单行容器
  • 当容器中交叉轴方向上存在剩余空间时, 该属性才有意义
序号 属性值 描述
1 flex-start默认 与交叉轴起始线对齐
2 flex-end 与交叉轴终止线对齐
3 center 与交叉轴中间线对齐: 居中对齐

6

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>交叉轴上对齐方式</title>
  7.     <style>
  8.       /* 容器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 150px;
  12.         display: flex;
  13.         /* display: inline-flex; */
  14.       }
  16.       .container {
  17.         flex-flow: word nowrap;
  18.         align-items: flex-start;
  19.         align-items: flex-end;
  20.         align-items: center;
  21.       }
  23.       /* 子元素 */
  24.       .item {
  25.         width: 50px;
  26.         height: 50px;
  27.         background-color: fuchsia;
  28.         font-size: 1.5rem;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div class="container">
  34.       <div class="item">1</div>
  35.       <div class="item">2</div>
  36.       <div class="item">3</div>
  37.       <div class="item">4</div>
  38.     </div>
  39.   </body>
  40. </html>

flex 多行容器交叉轴项目对齐

1. align-content属性

  • 该属性仅适用于: 多行容器
  • 多行容器中, 交叉轴会有多个项目, 剩余空间在项目之间分配才有意义
序号 属性值 描述
1 stretch默认 项目拉伸占据整个交叉轴
1 flex-start 所有项目与交叉轴起始线(顶部)对齐
2 flex-end 所有项目与交叉轴终止线对齐
3 center 所有项目与交叉轴中间线对齐: 居中对齐
4 space-between 两端对齐: 剩余空间在头尾项目之外的项目间平均分配
5 space-around 分散对齐: 剩余空间在每个项目二侧平均分配
6 space-evenly 平均对齐: 剩余空间在每个项目之间平均分配

提示: 多行容器中通过设置flex-wrap: wrap | wrap-reverse实现

7

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>多行容器对齐方式</title>
  7.     <style>
  8.       /* 容器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 150px;
  12.         display: flex;
  13.         /* display: inline-flex; */
  14.       }
  16.       .container {
  17.         flex-flow: row wrap;
  18.         /* 自动拉伸align-content: stretch; */
  19.         align-content: stretch;
  20.         align-content: space-evenly;
  21.         align-content: space-between;
  22.         align-content: space-around;
  23.       }
  25.       /* 子元素 */
  26.       .item {
  27.         width: 50px;
  28.         height: 50px;
  29.         background-color: fuchsia;
  30.         font-size: 1.5rem;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="container">
  36.       <div class="item">1</div>
  37.       <div class="item">2</div>
  38.       <div class="item">3</div>
  39.       <div class="item">4</div>
  40.       <div class="item">5</div>
  41.       <div class="item">6</div>
  42.       <div class="item">7</div>
  43.       <div class="item">8</div>
  44.       <div class="item">9</div>
  45.     </div>
  46.   </body>
  47. </html>

flex 项目交叉轴单独对齐

1. align-self属性

  • 该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式
序号 属性值 描述
1 auto默认值 继承 align-items 属性值
2 flex-start 与交叉轴起始线对齐
3 flex-end 与交叉轴终止线对齐
4 center 与交叉轴中间线对齐: 居中对齐
5 stretch 在交叉轴方向上拉伸
6 baseline 与基线对齐(与内容相关用得极少)

8

```h<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>xiangmushun项目顺序对齐方式</title>
<style>
/ 容器 /
.container {
width: 300px;
height: 150px;
display: flex;
/ display: inline-flex; /
}

.container {
}

/ 子元素 /
.item {
width: 50px;
height: 50px;
background-color: fuchsia;
font-size: 1.5rem;
order: 0;
}
.item:first-of-type {
order: 4;
background-color: greenyellow;
}
.item:nth-of-type(2) {
order: 3;
background-color: rgb(6, 221, 236);
}
.item:nth-of-type(3) {
order: 2;
background-color: mediumblue;
}
.item:last-of-type {
background-color: mediumturquoise;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
tml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>xiangmushun项目顺序对齐方式</title>
<style>
/ 容器 /
.container {
width: 300px;
height: 150px;
display: flex;
/ display: inline-flex; /
}

.container {
}

/ 子元素 /
.item {
width: 50px;
height: 50px;
background-color: fuchsia;
font-size: 1.5rem;
order: 0;
}
.item:first-of-type {
order: 4;
background-color: greenyellow;
}
.item:nth-of-type(2) {
order: 3;
background-color: rgb(6, 221, 236);
}
.item:nth-of-type(3) {
order: 2;
background-color: mediumblue;
}
.item:last-of-type {
background-color: mediumturquoise;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html> 

  1. ![](https://img.php.cn/upload/image/809/359/444/1586505440328047.png)
  2. # flex 项目放大因子
  4. ## 1. `flex-grow`属性
  6. - 在容器主轴上存在剩余空间时, `flex-grow`才有意义
  7. - 该属性的值,称为**放大因子**, 常见的属性值如下:
  9. | 序号 | 属性值    | 描述                 |
  10. | ---- | --------- | -------------------- |
  11. | 1    | `0`默认值 | 不放大,保持初始值    |
  12. | 2    | `initial` | 设置默认值,与`0`等效 |
  13. | 3    | `n`       | 放大因子: 正数       |
  14. ### 9
  15. ```html
  16. <!DOCTYPE html>
  17. <html lang="en">
  18.   <head>
  19.     <meta charset="UTF-8" />
  20.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  21.     <title>xiangmushun项目独立对齐方式</title>
  22.     <style>
  23.       /* 容器 */
  24.       .container {
  25.         width: 300px;
  26.         height: 150px;
  27.         display: flex;
  28.         /* display: inline-flex; */
  29.       }
  31.       .container {
  32.       }
  34.       /* 子元素 */
  35.       .item {
  36.         width: 50px;
  37.         height: 50px;
  38.         background-color: fuchsia;
  39.         font-size: 1.5rem;
  41.         align-self: auto;
  42.       }
  43.       .item:first-of-type {
  44.         height: inherit;
  45.         align-self: stretch;
  46.         background-color: greenyellow;
  47.       }
  48.       .item:nth-of-type(2) {
  49.         align-self: flex-end;
  50.         background-color: rgb(6, 221, 236);
  51.       }
  52.       .item:nth-of-type(3) {
  53.         align-self: flex-start;
  54.         background-color: mediumblue;
  55.       }
  56.       .item:last-of-type {
  57.         align-self: center;
  58.         background-color: red;
  59.       }
  60.     </style>
  61.   </head>
  62.   <body>
  63.     <div class="container">
  64.       <div class="item">1</div>
  65.       <div class="item">2</div>
  66.       <div class="item">3</div>
  67.       <div class="item">4</div>
  68.     </div>
  69.   </body>
  70. </html>

flex 项目收缩因子

1. flex-shrink属性

  • 当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义
  • 该属性的值,称为收缩因子, 常见的属性值如下:
序号 属性值 描述
1 1默认值 允许项目收缩
2 initial 设置初始默认值,与 1 等效
3 0 禁止收缩,保持原始尺寸
4 n 收缩因子: 正数

10

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>xiangmushun项目放大因子</title>
  7.     <style>
  8.       /* 容器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 150px;
  12.         display: flex;
  13.         /* display: inline-flex; */
  14.       }
  16.       .container {
  17.       }
  19.       /* 子元素 */
  20.       .item {
  21.         width: 50px;
  22.         height: 50px;
  23.         background-color: fuchsia;
  24.         font-size: 1.5rem;
  25.         flex-grow: 0;
  26.         flex-grow: initial;
  27.         /* flex-grow: 1; */
  28.         /* flex-grow: 1; */
  29.       }
  30.       .item:first-of-type {
  31.         flex-grow: 1;
  32.         background-color: greenyellow;
  33.       }
  34.       .item:nth-of-type(2) {
  35.         flex-grow: 2;
  36.         background-color: rgb(6, 221, 236);
  37.       }
  39.       .item:last-of-type {
  40.         flex-grow: 3;
  41.         background-color: red;
  42.       }
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <div class="container">
  47.       <div class="item">1</div>
  48.       <div class="item">2</div>
  49.       <div class="item">3</div>
  50.     </div>
  51.   </body>
  52. </html>

flex 项目计算尺寸

1. flex-basis属性

  • 在分配多余空间之前,项目占据的主轴空间
  • 浏览器根据这个属性，计算主轴是否有多余空间
  • 该属性会覆盖项目原始大小(width/height)
  • 该属性会被项目的min-width/min-height值覆盖
序号 属性值 描述
1 auto 默认值: 项目原来的大小
2 px 像素
3 % 百分比

优先级: 项目大小 < flex-basis < min-width/height

11

```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>
/ 容器 /
.container {
width: 180px;
height: 150px;
display: flex;
flex-flow: row nowrap;
/ display: inline-flex; /
}

  1.   .container {
  2.   }
  4.   /* 子元素 */
  5.   .item {
  6.     width: 100px;
  7.     height: 50px;
  8.     background-color: fuchsia;
  9.     font-size: 1.5rem;
  11.     flex-shrink: 0;
  12.   }
  13.   .item:first-of-type {
  14.     background-color: greenyellow;
  15.     flex-shrink: 1;
  16.   }
  17.   .item:nth-of-type(2) {
  18.     flex-shrink: 2;
  19.     background-color: rgb(6, 221, 236);
  20.   }
  22.   .item:last-of-type {
  23.     flex-shrink: 3;
  24.     background-color: red;
  25.   }
  26. </style>

</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>

  1. ![](https://img.php.cn/upload/image/179/383/363/1586505561982208.png)
  3. # flex 项目缩放的简写
  5. ## 1. `flex`属性
  7. - 项目放大,缩小与计算尺寸,对于项目非常重要,也很常用
  8. - 每次都要写这三个属性,非常的麻烦,且没有必要
  9. - `flex`属性,可以将以上三个属性进行简化:
  10. - 语法: `flex: flex-grow flex-shrink flex-basis`
  12. ### 1.1 三值语法
  14. | 序号 | 属性值             | 描述          |
  15. | ---- | ------------------ | ------------- |
  16. | 1    | 第一个值: 整数     | `flex-grow`   |
  17. | 2    | 第二个值: 整数     | `flex-shrink` |
  18. | 3    | 第三个值: 有效宽度 | `flex-basis`  |
  20. 举例:
  22. | 序号 | 案例              | 描述                            |
  23. | ---- | ----------------- | ------------------------------- |
  24. | 1    | `flex: 0 1 auto`  | 默认值: 不放大,可收缩, 初始宽度 |
  25. | 2    | `flex: 1 1 auto`  | 项目自动放大或收缩适应容器      |
  26. | 3    | `flex: 0 0 100px` | 按计算大小填充到容器中          |
  28. ### 1.2 双值语法
  30. | 序号 | 属性值             | 描述         |
  31. | ---- | ------------------ | ------------ |
  32. | 1    | 第一个值: 整数     | `flex-grow`  |
  33. | 3    | 第二个值: 有效宽度 | `flex-basis` |
  35. 举例:
  37. | 案例            | 描述                            |
  38. | --------------- | ------------------------------- |
  39. | `flex: 0 180px` | 禁止放大,按计算大小填充到容器中 |
  41. ### 1.3 单值语法
  43. | 序号 | 属性值   | 描述                    |
  44. | ---- | -------- | ----------------------- |
  45. | 1    | 整数     | `flex-grow`             |
  46. | 2    | 有效宽度 | `flex-basis`            |
  47. | 3    | 关键字   | `initial | auto | none` |
  49. 举例:
  51. | 序号 | 案例          | 描述              |
  52. | ---- | ------------- | ----------------- |
  53. | 1    | `flex: 1`     | `flex: 1 1 auto`  |
  54. | 2    | `flex: 180px` | `flex: 1 1 180px` |
  55. | 3    | `initial`     | `flex: 0 1 auto`  |
  56. | 4    | `auto`        | `flex: 1 1 auto`  |
  57. | 5    | `none`        | `flex: 0 0 auto`  |
  59. > 推荐使用`flex`, 就像推荐使用`flex-grow`设置主轴与换行一样
  61. ```html
  62. <!DOCTYPE html>
  63. <html lang="en">
  64.   <head>
  65.     <meta charset="UTF-8" />
  66.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  67.     <title>项目收缩因子</title>
  68.     <style>
  69.       /* 容器 */
  70.       .container {
  71.         width: 300px;
  72.         height: 150px;
  73.         display: flex;
  75.         /* display: inline-flex; */
  76.       }
  78.       .container {
  79.       }
  81.       /* 子元素 */
  82.       .item {
  83.         width: 100px;
  84.         height: 50px;
  85.         background-color: fuchsia;
  86.         font-size: 1.5rem;
  87.       }
  88.       .item:first-of-type {
  89.         flex: 0 1 auto;
  90.         flex: 1 1 auto;
  91.         /* flex: 0 1 80px; */
  92.         background-color: greenyellow;
  93.       }
  94.       .item:nth-of-type(2) {
  95.         flex: 0 100px;
  96.         background-color: rgb(6, 221, 236);
  97.       }
  99.       .item:last-of-type {
  100.         flex: auto;
  101.         /* flex: 1; */
  102.         flex: 0;
  103.         /* flex: none; */
  104.         /* flex: 0 0 auto; */
  105.         flex: 0 0 150px;
  107.         background-color: red;
  108.       }
  109.     </style>
  110.   </head>
  111.   <body>
  112.     <div class="container">
  113.       <div class="item">1</div>
  114.       <div class="item">2</div>
  115.       <div class="item">3</div>
  116.     </div>
  117.   </body>
  118. </html>

上一条：flex弹性布局下一条：Composer windows安装详细介绍
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多