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

博客列表 > flex项目上的三个属性

flex项目上的三个属性

L.E
L.E 原创
2021年04月11日 23:17:30 748浏览

flex 项目的三个属性

序号 属性 描述
1 flex 项目的缩放比例与基准宽度
2 align-self 单个项目在交叉轴上的对齐方式
3 order 项目在主轴上排列顺序

flex 项目的缩放比例与基准宽度

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>flex 项目的缩放比例与基准宽度</title>
  8. <style>
  9. * {
  10. box-sizing: border-box;
  11. }
  12. :root {
  13. /* 为了布局,方便后面使用rem计算 */
  14. font-size: 10px;
  15. }
  16. body {
  17. font-size: 1.6rem;
  18. }
  19. /* flex容器 */
  20. .container {
  21. display: flex;
  22. height: 25rem;
  23. border: 1px solid;
  24. }
  25. /* flex项目样式 */
  26. .container > .item {
  27. width: 10rem;
  28. /* max-width: 10rem; */
  29. padding: 2rem;
  30. background-color: cornflowerblue;
  31. border: 1px solid;
  32. /* 设置项目是否允许放大 */
  33. /* flex-grow: 1; */
  34. /* 设置项目是否允许收缩 */
  35. /* flex-shrink: 1; */
  36. /* 设置项目在主轴上空间的大小 */
  37. /* flex-basis: 15rem; */
  38. /* max-width > flex-basis > width */
  39. /* flex:放大因子 收缩因子 计算大小 */
  40. /* flex:1 0 15rem; */
  41. }
  42. /* flex属性 */
  43. .container > .item {
  44. /* flex: 默认值,禁止放大,允许收缩,宽度自动*/
  45. /* flex: 0 1 auto; */
  46. /* flex: initial; */
  47. /* 允许放大与收缩 */
  48. /* flex: 1 1 auto;
  49. flex: auto; */
  50. /* 完全失去弹性,禁止放大与收缩 */
  51. /* flex: 0 0 auto;
  52. flex: none; */
  53. /* 单值,仅表示是否允许放大 */
  54. /* flex: 1;
  55. flex: auto; */
  56. /* flex: 2;
  57. flex: 5;
  58. flex: 10; */
  59. }
  60. /* 选的是第一个和第四个 */
  61. .container > .item:first-of-type,
  62. .container > .item:last-of-type {
  63. background-color: lightcoral;
  64. /* flex: 1 1 auto; */
  65. flex: 1;
  66. }
  67. .container > .item:nth-of-type(2),
  68. .container > .item:nth-of-type(2) + * {
  69. background-color: lightsalmon;
  70. /* flex: 2 1 auto; */
  71. flex: 2;
  72. }
  73. </style>
  74. </head>
  75. <body>
  76. <div class="container">
  77. <div class="item">item1</div>
  78. <div class="item">item2</div>
  79. <div class="item">item3</div>
  80. <div class="item">item4</div>
  81. </div>
  82. </body>
  83. </html>

效果图:

align-self 单个项目在交叉轴上的对齐方式

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>align-self 单个项目在交叉轴上的对齐方式</title>
  8. <style>
  9. * {
  10. box-sizing: border-box;
  11. }
  12. :root {
  13. /* 为了布局,方便后面使用rem计算 */
  14. font-size: 10px;
  15. }
  16. body {
  17. font-size: 1.6rem;
  18. }
  19. /* flex容器 */
  20. .container {
  21. display: flex;
  22. height: 25rem;
  23. border: 1px solid;
  24. /* 设置所有的项目在交叉轴上的对齐方式 */
  25. /* align-self: ; */
  26. }
  27. /* flex项目样式 */
  28. .container > .item {
  29. width: 10rem;
  30. padding: 2rem;
  31. background-color: cornflowerblue;
  32. border: 1px solid;
  33. }
  34. .container > .item:nth-of-type(3) {
  35. background-color: maroon;
  36. align-self: stretch;
  37. align-self: flex-start;
  38. align-self: flex-end;
  39. align-self: center;
  40. }
  41. /* flex项目支持定位,不支持浮动 */
  42. .container {
  43. position: relative;
  44. }
  45. .container > .item:nth-last-of-type(2) {
  46. position: absolute;
  47. left: 8rem;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <div class="container">
  53. <div class="item">item1</div>
  54. <div class="item">item2</div>
  55. <div class="item">item3</div>
  56. <div class="item">item4</div>
  57. </div>
  58. </body>
  59. </html>

效果图:

order 项目在主轴上排列顺序

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>order 项目在主轴上排列顺序</title>
  8. <style>
  9. * {
  10. box-sizing: border-box;
  11. }
  12. :root {
  13. /* 为了布局,方便后面使用rem计算 */
  14. font-size: 10px;
  15. }
  16. body {
  17. font-size: 1.6rem;
  18. }
  19. /* flex容器 */
  20. .container {
  21. display: flex;
  22. height: 25rem;
  23. border: 1px solid;
  24. }
  25. /* flex项目样式 */
  26. .container > .item {
  27. width: 10rem;
  28. /* max-width: 10rem; */
  29. padding: 2rem;
  30. background-color: cornflowerblue;
  31. border: 1px solid;
  32. order: 0;
  33. }
  34. .item.div1 {
  35. background-color: maroon;
  36. order: 99;
  37. }
  38. .item.div2 {
  39. background-color: mediumaquamarine;
  40. }
  41. .item.div3 {
  42. background-color: mediumorchid;
  43. order: -5;
  44. }
  45. .item.div4 {
  46. background-color: mediumvioletred;
  47. }
  48. /* order的值越小越靠前,越大越靠后 */
  49. </style>
  50. </head>
  51. <body>
  52. <div class="container">
  53. <div class="item div1">item1</div>
  54. <div class="item div2">item2</div>
  55. <div class="item div3">item3</div>
  56. <div class="item div4">item4</div>
  57. </div>
  58. </body>
  59. </html>

效果图:

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