PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 【CSS入门】前端布局神器Flex弹性盒模型详解及适用场景(建议收藏)

【CSS入门】前端布局神器Flex弹性盒模型详解及适用场景(建议收藏)

 一纸荒凉* Armani
 一纸荒凉* Armani 原创
2021年03月25日 20:20:24 2408浏览

复习position定位属性制作一个遮罩模态框

  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. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. }
  14. /* 页眉 */
  15. header {
  16. background-color: #dedede;
  17. padding: 0.5em 2em;
  18. overflow: hidden;
  19. }
  20. header h2 {
  21. float: left;
  22. }
  23. header button {
  24. float: right;
  25. width: 10em;
  26. height: 2.5em;
  27. }
  28. header button:hover {
  29. cursor: pointer;
  30. background-color: #fff;
  31. }
  32. /* 模态框 */
  33. /* 遮罩 */
  34. .modal .modal-backdrop {
  35. /* 蒙板必须将弹层的后面全部盖住,意味着与容器大小一样 */
  36. position: fixed;
  37. top: 0;
  38. left: 0;
  39. right: 0;
  40. bottom: 0;
  41. background-color: rgb(0, 0, 0, 0.5);
  42. }
  43. /* 模态框主体 */
  44. .modal .modal-body {
  45. border: 1px solid #000;
  46. padding: 1em;
  47. min-width: 20em;
  48. /* background-color: lightcyan; */
  49. background: linear-gradient(to right, lightcyan, #fff);
  50. /* 将一个块在别一个块中垂直水平居中 */
  51. position: fixed;
  52. top: 5em;
  53. left: 30em;
  54. right: 30em;
  55. }
  56. .modal .modal-body form {
  57. width: 80%;
  58. }
  59. .modal .modal-body form caption {
  60. font-weight: bolder;
  61. margin-bottom: 1em;
  62. }
  63. .modal .modal-body form td {
  64. padding: 0.5em;
  65. }
  66. .modal .modal-body form table td:first-of-type {
  67. width: 5em;
  68. }
  69. .modal .modal-body form input {
  70. width: 20em;
  71. height: 2em;
  72. }
  73. .modal {
  74. position: relative;
  75. }
  76. .modal .modal-body .close {
  77. position: absolute;
  78. right: 1em;
  79. width: 4em;
  80. height: 2em;
  81. }
  82. .modal button:hover {
  83. cursor: pointer;
  84. background-color: #fff;
  85. }
  86. /* 当页面刚打开的时候,应该将弹层隐藏 */
  87. .modal {
  88. display: none;
  89. }
  90. </style>
  91. </head>
  92. <body>
  93. <!-- 页眉头部 -->
  94. <header>
  95. <h1>我的网站</h1>
  96. <button>登录</button>
  97. </header>
  98. <!-- 模态框 -->
  99. <div class="modal">
  100. <!-- 遮罩 -->
  101. <div class="modal-backdrop"></div>
  102. <!-- 弹出框 -->
  103. <div class="modal-body">
  104. <button class="close">关闭</button>
  105. <form action="" method="post">
  106. <table>
  107. <caption>用户登录</caption>
  108. <tr>
  109. <td><label for="email">邮箱:</label></td>
  110. <td><input type="email" name="email" id=""></td>
  111. </tr>
  112. <tr>
  113. <td><label for="password">密码:</label></td>
  114. <td><input type="password" name="password" id=""></td>
  115. </tr>
  116. <tr>
  117. <td></td>
  118. <td><button>登录</button></td>
  119. </tr>
  120. </table>
  121. </form>
  122. </div>
  123. </div>
  124. </body>
  125. <script>
  126. const btn = document.querySelector("header button");
  127. const modal = document.querySelector(".modal");
  128. const close = document.querySelector(".close");
  129. btn.addEventListener("click", setModal, false);
  130. close.addEventListener("click", setModal, false);
  131. function setModal(ev) {
  132. ev.preventDefault();
  133. let status = window.getComputedStyle(modal, null).getPropertyValue("display");
  134. modal.style.display = status === "none" ? "block" : "none";
  135. }
  136. </script>
  137. </html>

复习定位实现水平垂直居中

  1. <style>
  2. .box {
  3. width: 15em;
  4. height: 15em;
  5. background-color: lightgreen;
  6. position: relative;
  7. }
  8. .box .item {
  9. width: 5em;
  10. height: 5em;
  11. background-color: coral;
  12. position: absolute;
  13. top: 0;
  14. left: 0;
  15. right: 0;
  16. bottom: 0;
  17. margin: auto;
  18. }
  19. </style>
  20. <div class="box">
  21. <div class="item"></div>
  22. </div>

初体验flex实现水平垂直居中

  1. <style>
  2. .box {
  3. width: 15em;
  4. height: 15em;
  5. background-color: lightgreen;
  6. }
  7. .box .item {
  8. width: 5em;
  9. height: 5em;
  10. background-color: coral;
  11. }
  12. .box {
  13. display: flex;
  14. justify-content: center;
  15. align-items: center;
  16. }
  17. </style>
  18. <div class="box">
  19. <div class="item"></div>
  20. </div>

布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。在制作移动端京东首页案例之前,我们首先要了解一下flex布局的一些知识点!

Flex 布局教程:语法

一、Flex 布局是什么?

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

  1. .box{
  2. display: flex;
  3. }

注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”。

开始位置叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

每个弹性容器都有两根轴:主轴和交叉轴,两轴之间成90度关系。注意:水平的不一定就是主轴。
每根轴都有起点和终点,这对于元素的对齐非常重要。

弹性容器中的所有子元素称为<弹性元素>,弹性元素永远沿主轴排列。

弹性元素也可以通过display:flex设置为另一个弹性容器,形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

弹性容器的两根轴非常重要,所有属性都是作用于轴的。下面从轴入手,将所有flex布局属性串起来理解。

  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>flex布局</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13. .container {
  14. /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  15. display: flex;
  16. height: 300px;
  17. border: 2px solid pink;
  18. }
  19. /* 项目样式: 必须是flex容器的子元素 */
  20. /* flex容器中的子元素自动成flex容器的项目,并且是行内块显示 */
  21. .container>.item {
  22. width: 60px;
  23. height: 60px;
  24. font-size: 30px;
  25. text-align: center;
  26. line-height: 60px;
  27. color: aqua;
  28. background-color: green;
  29. border: 1px solid red;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="container">
  35. <div class="item">1</div>
  36. <div class="item">2</div>
  37. <div class="item">3</div>
  38. <div class="item">4</div>
  39. <div class="item">5</div>
  40. <div class="item">6</div>
  41. <div class="item">7</div>
  42. <div class="item">8</div>
  43. </div>
  44. </body>
  45. </html>

给父元素容器设置display: flex弹性盒布局,容器中的子元素自动成flex容器的项目,并且是行内块显示。当容器宽度不足的时候,项目将被压缩宽度显示。

二、容器的属性

容器属性

以下6个属性设置在容器上

  • flex-direction 设置主轴的方向
  • flex-wrap 设置是否换行排列
  • flex-flow flex-direction属性和flex-wrap属性的简写形式
  • justify-content 项目在主轴上的对齐方式
  • align-items 项目在交叉轴上的对齐方式
  • align-content 多根轴线的对齐方式

2.1 flex-direction属性

flex-direction属性决定主轴的方向(即项目的排列方向)。

  1. .box {
  2. flex-direction: row | row-reverse | column | column-reverse;
  3. }
  • row(默认值):主轴为水平方向,起点在左端。

  • row-reverse:主轴为水平方向,起点在右端。

  • column:主轴为垂直方向,起点在上沿。

  • column-reverse:主轴为垂直方向,起点在下沿。

  1. <div class="container">
  2. <div class="item">1</div>
  3. <div class="item">2</div>
  4. <div class="item">3</div>
  5. <div class="item">4</div>
  6. <div class="item">5</div>
  7. <div class="item">6</div>
  8. <div class="item">7</div>
  9. <div class="item">8</div>
  10. </div>
  1. .container {
  2. display: flex;
  3. /* 设置主轴的方向 (默认row水平) */
  4. flex-direction: row;
  5. height: 300px;
  6. border: 2px solid pink;
  7. }
  8. .container>.item {
  9. width: 60px;
  10. height: 60px;
  11. font-size: 30px;
  12. text-align: center;
  13. line-height: 60px;
  14. color: aqua;
  15. background-color: green;
  16. border: 1px solid red;
  17. }




2.2 flex-wrap属性

默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

  1. .box{
  2. flex-wrap: nowrap | wrap | wrap-reverse;
  3. }

(1)nowrap(默认):不换行。容器宽度不足时,项目宽度将被压缩。

(2)wrap:换行,第一行在上方。

(3)wrap-reverse:换行,第一行在下方。

  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>flex布局</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13. .container {
  14. /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  15. display: flex;
  16. /* 设置主轴方向 */
  17. flex-direction: column;
  18. /* 换行显示 */
  19. flex-wrap: wrap;
  20. border: 2px solid pink;
  21. }
  22. /* 项目样式: 必须是flex容器的子元素 */
  23. .container>.item {
  24. width: 60px;
  25. height: 60px;
  26. font-size: 30px;
  27. text-align: center;
  28. line-height: 60px;
  29. color: aqua;
  30. background-color: green;
  31. border: 1px solid red;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div class="container">
  37. <div class="item">1</div>
  38. <div class="item">2</div>
  39. <div class="item">3</div>
  40. <div class="item">4</div>
  41. <div class="item">5</div>
  42. <div class="item">6</div>
  43. <div class="item">7</div>
  44. <div class="item">8</div>
  45. </div>
  46. </body>
  47. </html>

2.3 flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

  1. .box {
  2. flex-flow: row nowrap;
  3. }

2.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

  1. .box {
  2. justify-content: flex-start | flex-end | center | space-between | space-around;
  3. }
  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

  1. <div class="container">
  2. <div class="item">1</div>
  3. <div class="item">2</div>
  4. <div class="item">3</div>
  5. <div class="item">4</div>
  6. <div class="item">5</div>
  7. <div class="item">6</div>
  8. <div class="item">7</div>
  9. <div class="item">8</div>
  10. </div>
  1. .container {
  2. /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  3. display: flex;
  4. /* 设置主轴方向 */
  5. /* flex-direction: column; */
  6. /* 换行显示 */
  7. /* flex-wrap: wrap; */
  8. /* 综合属性 */
  9. flex-flow: row wrap;
  10. /* 设置水平对齐方式 */
  11. justify-content: start;
  12. border: 2px solid pink;
  13. }
  14. /* 项目样式: 必须是flex容器的子元素 */
  15. .container>.item {
  16. width: 60px;
  17. height: 60px;
  18. font-size: 30px;
  19. text-align: center;
  20. line-height: 60px;
  21. color: aqua;
  22. background-color: green;
  23. border: 1px solid red;
  24. }
  25. .container:nth-child(2) {
  26. justify-content: end;
  27. }
  28. .container:nth-child(3) {
  29. justify-content: center;
  30. }
  31. .container:nth-child(4) {
  32. justify-content: space-between;
  33. }
  34. .container:nth-child(5) {
  35. justify-content: space-around;
  36. }

2.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。

  1. .box {
  2. align-items: flex-start | flex-end | center | baseline | stretch;
  3. }

  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。

2.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

  1. .box {
  2. align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  3. }

  • stretch(默认值):轴线占满整个交叉轴。
  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

三、项目的属性

项目属性

以下6个属性设置在项目上

  • order 定义项目的排列顺序
  • flex-grow 定义项目的放大比例
  • flex-shrink 定义了项目的缩小比例
  • flex-basis 定义了在分配多余空间之前,项目占据的主轴空间
  • flex flex-grow, flex-shrink 和 flex-basis的简写
  • align-self 允许单个项目有与其他项目不一样的对齐方式

3.1 order属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

  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>flex布局</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13. .container {
  14. /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  15. display: flex;
  16. /* 设置主轴方向 */
  17. /* flex-direction: column; */
  18. /* 换行显示 */
  19. /* flex-wrap: wrap; */
  20. /* 综合属性 */
  21. flex-flow: row wrap;
  22. /* 设置水平对齐方式 */
  23. justify-content: start;
  24. border: 2px solid pink;
  25. }
  26. /* 项目样式: 必须是flex容器的子元素 */
  27. .container>.item {
  28. width: 60px;
  29. height: 60px;
  30. font-size: 30px;
  31. text-align: center;
  32. line-height: 60px;
  33. color: aqua;
  34. background-color: green;
  35. border: 1px solid red;
  36. }
  37. /* order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0 */
  38. .container .item:nth-child(2) {
  39. order: -1;
  40. }
  41. .container .item:nth-child(4) {
  42. order: -4;
  43. }
  44. .container .item:nth-child(5) {
  45. order: 8;
  46. }
  47. .container .item:nth-child(1) {
  48. order: 6;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <div class="container">
  54. <div class="item">1</div>
  55. <div class="item">2</div>
  56. <div class="item">3</div>
  57. <div class="item">4</div>
  58. <div class="item">5</div>
  59. <div class="item">6</div>
  60. <div class="item">7</div>
  61. <div class="item">8</div>
  62. </div>
  63. </body>
  64. </html>

3.2 flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

  1. .item {
  2. flex-grow: <number>; /* default 0 */
  3. }

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

  1. <div class="container">
  2. <div class="item">1</div>
  3. <div class="item">2</div>
  4. <div class="item">3</div>
  5. <div class="item">4</div>
  6. </div>

等分四个项目

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. }
  7. .container {
  8. /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  9. display: flex;
  10. /* 设置主轴方向 */
  11. /* flex-direction: column; */
  12. /* 换行显示 */
  13. /* flex-wrap: wrap; */
  14. /* 综合属性 */
  15. flex-flow: row wrap;
  16. /* 设置水平对齐方式 */
  17. justify-content: start;
  18. border: 2px solid pink;
  19. }
  20. /* 项目样式: 必须是flex容器的子元素 */
  21. .container>.item {
  22. width: 60px;
  23. height: 60px;
  24. font-size: 30px;
  25. text-align: center;
  26. line-height: 60px;
  27. color: aqua;
  28. background-color: green;
  29. border: 1px solid red;
  30. flex-grow: 1;
  31. }
  32. </style>

中间项目占据所以剩余空间

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. }
  7. .container {
  8. /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  9. display: flex;
  10. /* 设置主轴方向 */
  11. /* flex-direction: column; */
  12. /* 换行显示 */
  13. /* flex-wrap: wrap; */
  14. /* 综合属性 */
  15. flex-flow: row wrap;
  16. /* 设置水平对齐方式 */
  17. justify-content: start;
  18. border: 2px solid pink;
  19. }
  20. /* 项目样式: 必须是flex容器的子元素 */
  21. .container>.item {
  22. width: 60px;
  23. height: 60px;
  24. font-size: 30px;
  25. text-align: center;
  26. line-height: 60px;
  27. color: aqua;
  28. background-color: green;
  29. border: 1px solid red;
  30. flex-grow: 1;
  31. }
  32. .container .item:nth-child(2) {
  33. flex-grow: 2;
  34. }
  35. </style>

三个项目分别占一二三份

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. }
  7. .container {
  8. /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  9. display: flex;
  10. /* 设置主轴方向 */
  11. /* flex-direction: column; */
  12. /* 换行显示 */
  13. /* flex-wrap: wrap; */
  14. /* 综合属性 */
  15. flex-flow: row wrap;
  16. /* 设置水平对齐方式 */
  17. justify-content: start;
  18. border: 2px solid pink;
  19. }
  20. /* 项目样式: 必须是flex容器的子元素 */
  21. .container>.item {
  22. width: 60px;
  23. height: 60px;
  24. font-size: 30px;
  25. text-align: center;
  26. line-height: 60px;
  27. color: aqua;
  28. background-color: green;
  29. border: 1px solid red;
  30. flex-grow: 1;
  31. }
  32. .container .item:nth-child(2) {
  33. flex-grow: 2;
  34. background-color: pink;
  35. }
  36. .container .item:nth-child(3) {
  37. flex-grow: 3;
  38. background-color: yellow;
  39. }
  40. </style>

3.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

  1. .item {
  2. flex-shrink: <number>; /* default 1 */
  3. }


如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为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>flex布局</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13. .container {
  14. /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  15. display: flex;
  16. /* 设置主轴方向 */
  17. /* flex-direction: column; */
  18. /* 换行显示 */
  19. /* flex-wrap: wrap; */
  20. /* 综合属性 */
  21. flex-flow: row nowrap;
  22. /* 设置水平对齐方式 */
  23. justify-content: start;
  24. border: 2px solid pink;
  25. }
  26. /* 项目样式: 必须是flex容器的子元素 */
  27. .container>.item {
  28. width: 100px;
  29. height: 60px;
  30. font-size: 30px;
  31. text-align: center;
  32. line-height: 60px;
  33. color: aqua;
  34. background-color: green;
  35. border: 1px solid red;
  36. }
  37. .container .item:nth-child(2) {
  38. /* 宽度不足时,其他元素进行缩放,该项目不缩放 */
  39. flex-shrink: 0;
  40. background-color: pink;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45. <div class="container">
  46. <div class="item">1</div>
  47. <div class="item">2</div>
  48. <div class="item">3</div>
  49. </div>
  50. </body>
  51. </html>

宽度不足时,项目一和三被缩放了,二依然保持原有宽度。

3.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

  1. .item {
  2. flex-basis: <length> | auto; /* default auto */
  3. }

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

  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>flex布局</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13. .container {
  14. /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  15. display: flex;
  16. /* 设置主轴方向 */
  17. /* flex-direction: column; */
  18. /* 换行显示 */
  19. /* flex-wrap: wrap; */
  20. /* 综合属性 */
  21. flex-flow: row nowrap;
  22. /* 设置水平对齐方式 */
  23. justify-content: start;
  24. border: 2px solid pink;
  25. }
  26. /* 项目样式: 必须是flex容器的子元素 */
  27. .container>.item {
  28. width: 60px;
  29. height: 60px;
  30. font-size: 30px;
  31. text-align: center;
  32. line-height: 60px;
  33. color: aqua;
  34. background-color: green;
  35. border: 1px solid red;
  36. }
  37. .container .item:nth-child(1) {
  38. flex-basis: 120px;
  39. background-color: yellow;
  40. }
  41. .container .item:nth-child(2) {
  42. flex-basis: 100px;
  43. background-color: pink;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <div class="container">
  49. <div class="item">1</div>
  50. <div class="item">2</div>
  51. <div class="item">3</div>
  52. </div>
  53. </body>
  54. </html>

3.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

  1. .item {
  2. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  3. }

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

  1. /* 默认值,禁止放大,但允许自动收缩,项目宽度自动计算 */
  2. flex: 0 1 auto;
  3. /* 默认值使用关键字简写 */
  4. flex: initial;
  5. /* 允许放大和收缩 */
  6. flex: 1 1 auto;
  7. /* 简写 */
  8. flex: auto;
  9. /* 禁止放大和收缩 */
  10. flex: 0 0 auto;
  11. /* 简写 */
  12. flex: none;
  13. /* 如果只有一个数字,省掉后面二个参数,表示的放大因子 */
  14. flex: 1;
  15. /* 等于 flex: 1 1 auto; */

3.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

  1. .item {
  2. align-self: auto | flex-start | flex-end | center | baseline | stretch;
  3. }


该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

总结

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议