博客列表 >flex容器与项目的常用属性

flex容器与项目的常用属性

a.
a.原创
2020年12月23日 01:29:10526浏览

1. 容器属性

编号 属性 描述
1 flex-flow 主轴方向与换行方式
2 justify-conten 项目在主轴上的对齐方式
3 aling-items 项目在交叉轴上的对齐方式
4 align-content 项目在多行容器中的对齐方式

代码示例

  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. .container {
  9. display: flex;
  10. height: 40em;
  11. padding: 1em;
  12. margin: 1em;
  13. border: limegreen 1px solid;
  14. }
  15. .item {
  16. border: magenta solid 1px;
  17. background-color: mediumslateblue;
  18. width: 4em;
  19. height: 3em;
  20. }
  21. /* 单行容器属性 */
  22. .container {
  23. /* flex-direction: row; 这个是默认属性 */
  24. /* flex-wrap: nowrap; 这个是控制换行 */
  25. /* 一般使用简写 */
  26. /* flex-flow: nowrap row;默认值 */
  27. /* 多行容器:一行显示不行,允许换行显示 */
  28. /* flex-flow: row wrap; */
  29. /* 换为列方向 主轴垂直方向*/
  30. /* flex-flow: nowrap column; */
  31. /* flex-flow: wrap column; */
  32. }
  33. /* 设置项目在单行容器上轴上的对齐前提:主轴上存在剩余空间 */
  34. /* 空间分配的两个方案: */
  35. .container {
  36. /* 1.将所有项目视为一个整体,在项目组两边进行分配 */
  37. /* 起始边对齐 */
  38. justify-content: flex-start;
  39. /* 终止边对齐 */
  40. justify-content: flex-end;
  41. /* 居中对齐 */
  42. justify-content: center;
  43. /* 2.将所有项目视为独立个体,在项目之间进行分配 */
  44. /* 两端对齐 */
  45. justify-content: space-between;
  46. /*分散对齐:每个项目中间平均分配*/
  47. justify-content: space-around;
  48. /* 平均对齐 */
  49. justify-content: space-evenly;
  50. }
  51. /* 交叉轴上的对齐方式: */
  52. .container {
  53. /* 默认拉伸 */
  54. align-items: stretch;
  55. align-items: flex-start;
  56. align-items: flex-end;
  57. align-items: center;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div class="container">
  63. <div class="item">1</div>
  64. <div class="item">2</div>
  65. <div class="item">3</div>
  66. <div class="item">4</div>
  67. <div class="item">5</div>
  68. <div class="item">6</div>
  69. <div class="item">7</div>
  70. <div class="item">8</div>
  71. </div>
  72. </body>
  73. </html>

效果:

  • 起始边对齐
  • 终止边对齐
  • 居中对齐
  • 两端对齐
  • 分散对齐
  • 平均对齐

1.4 align-content

  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. .container {
  9. display: flex;
  10. height: 40em;
  11. padding: 1em;
  12. margin: 1em;
  13. border: limegreen 1px solid;
  14. }
  15. .item {
  16. border: magenta solid 1px;
  17. background-color: mediumslateblue;
  18. width: 4em;
  19. height: 3em;
  20. }
  21. /* 多行容器属性 */
  22. .container {
  23. /* 多行容器 */
  24. flex-flow: row wrap;
  25. /* 默认值 */
  26. align-content: stretch;
  27. align-content: flex-start;
  28. align-content: flex-end;
  29. align-content: center;
  30. /* 两端对齐 */
  31. align-content: space-between;
  32. /* 分散对齐 */
  33. align-content: space-around;
  34. /*平均对齐*/
  35. align-content: space-evenly;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div class="container">
  41. <div class="item">1</div>
  42. <div class="item">2</div>
  43. <div class="item">3</div>
  44. <div class="item">4</div>
  45. <div class="item">5</div>
  46. <div class="item">6</div>
  47. <div class="item">7</div>
  48. <div class="item">8</div>
  49. </div>
  50. </body>
  51. </html>

效果:

  • 多行容器

2. 项目属性

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

2.1 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. .container {
  9. display: flex;
  10. height: 40em;
  11. padding: 1em;
  12. margin: 1em;
  13. border: limegreen 1px solid;
  14. }
  15. .item {
  16. border: magenta solid 1px;
  17. background-color: mediumslateblue;
  18. width: 8em;
  19. height: 3em;
  20. /* flex: flex-grow flex-shrink flex-basis */
  21. /* flex: 放大因子 收缩因子 项目在主轴上的基准宽度 */
  22. /* 默认属性,不放大可以收缩 */
  23. flex: 0 1 auto;
  24. flex: initial;
  25. /* 放大和收缩 */
  26. flex: 1 1 auto;
  27. flex: auto;
  28. /* 禁止放大收缩 */
  29. flex: 0 0 auto;
  30. /* 简写 */
  31. flex: none;
  32. /* 如果只有一个数字,省掉后面二个参数,表示的放大因子 */
  33. flex: 1;
  34. /* 等于 flex: 1 1 auto; */
  35. /* flex一般不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征 */
  36. }
  37. .container > .item:last-of-type {
  38. flex: 2;
  39. }
  40. .container > .item:nth-of-type(2),
  41. .container > .item:first-of-type {
  42. flex: 1;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <div class="container">
  48. <div class="item">1</div>
  49. <div class="item">2</div>
  50. <div class="item">3</div>
  51. </div>
  52. </body>
  53. </html>

2.2 align-self

  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. .container {
  9. display: flex;
  10. height: 20em;
  11. padding: 1em;
  12. margin: 1em;
  13. border: limegreen 1px solid;
  14. }
  15. .item {
  16. border: magenta solid 1px;
  17. background-color: mediumslateblue;
  18. width: 4em;
  19. height: 3em;
  20. }
  21. /* 设置一个项目与其它项目对齐方式不一样 */
  22. .item:first-of-type {
  23. align-self: stretch;
  24. align-self: flex-start;
  25. align-self: flex-end;
  26. align-self: center;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div class="container">
  32. <div class="item">1</div>
  33. <div class="item">2</div>
  34. <div class="item">3</div>
  35. </div>
  36. </body>
  37. </html>

2.3 order

  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. .container {
  9. display: flex;
  10. height: 40em;
  11. padding: 1em;
  12. margin: 1em;
  13. border: limegreen 1px solid;
  14. }
  15. .item {
  16. border: magenta solid 1px;
  17. position: relative;
  18. width: 4em;
  19. height: 3em;
  20. }
  21. /* 设置一个项目与其它项目对齐方式不一样 */
  22. .container > .item:first-of-type {
  23. background-color: mediumslateblue;
  24. order: 2;
  25. }
  26. .container > .item:nth-of-type(2) {
  27. background-color: rgb(186, 211, 96);
  28. order: 1;
  29. }
  30. .container > .item:last-of-type {
  31. background-color: rgb(155, 238, 87);
  32. order: 3;
  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>
  42. </body>
  43. </html>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议
a.2020-12-23 13:09:042楼
row-reverse和colume-reverse写掉了
a.2020-12-23 12:13:351楼
好无语,我的效果图被吞了