flex-flow:主轴方向与换行方式
justify-content:项目在主轴上的对齐方式
align-items: 项目在交叉轴上的对齐方式
align-content: 项目在多行容器中的对齐方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8. <style>
  9. * {
  10. box-sizing: border-box;
  11. }
  12. :root {
  13. font-size: 10px;
  14. }
  15. body {
  16. font-size: 1.6rem;
  17. }
  18. .container {
  19. display: flex;
  20. height: 100vh;
  21. border: 2px solid #000000;
  22. /* flex-flow:主轴方向与换行方式 */
  23. /* 主轴水平,不换行 */
  24. /* flex-flow: row nowrap; */
  25. /* 主轴水平,换行 */
  26. flex-flow: row wrap;
  27. /* 主轴垂直,不换行 */
  28. /* flex-flow: column nowrap; */
  29. /* 主轴垂直,换行 */
  30. /* flex-flow: column wrap; */
  31. /* justify-content:项目在主轴上的对齐方式 */
  32. /* 居中 */
  33. justify-content: center;
  34. /* 起始线 */
  35. justify-content: flex-start;
  36. /* 终止线 */
  37. justify-content: flex-end;
  38. /* 分散对齐 */
  39. justify-content: space-around;
  40. /* 二端对齐 */
  41. justify-content: space-between;
  42. /* 平均对齐 */
  43. justify-content: space-evenly;
  44. /* align-items: 项目在交叉轴上的对齐方式 */
  45. /* 默认拉伸 */
  46. /* align-items: stretch; */
  47. /* 起始线 */
  48. /* align-items: flex-start; */
  49. /* 终止线 */
  50. /* align-items: flex-end; */
  51. /* 居中 */
  52. /* align-items: center; */
  53. /* align-content: 项目在多行容器中的对齐方式 */
  54. /* 默认拉伸 */
  55. align-content: stretch;
  56. /* 起始线 */
  57. align-content: flex-start;
  58. /* 终止线 */
  59. align-content: flex-end;
  60. /* 剧中 */
  61. align-content: center;
  62. }
  63. .container > .item {
  64. padding: 1rem;
  65. /* height: 5rem; */
  66. /* width: 10rem; */
  67. background-color: cyan;
  68. }
  69. </style>
  70. </head>
  71. <body>
  72. <div class="container">
  73. <div class="item">item1</div>
  74. <div class="item">item2</div>
  75. <div class="item">item3</div>
  76. <div class="item">item4</div>
  77. <div class="item">item5</div>
  78. <div class="item">item6</div>
  79. </div>
  80. </body>
  81. </html>

更多相关文章

  1. flex容器常用的四个属性
  2. flex项目属性,实战案例。
  3. flex容器中的四个属性的功能,参数,以及作用
  4. flex布局理解
  5. flex容器中的四个属性的功能演示
  6. flex容器属性的功能,参数,以及作用
  7. css-flex布局
  8. 3.24实例演示flex容器中的四个属性的功能,参数,以及作用
  9. css之flex容器

随机推荐

  1. .NetCore如何获取Json和Xml格式的配置信
  2. ASP.Net Core中关于WebApi几种版本控制对
  3. 详解.Net Core使用Socket与树莓派进行通
  4. C#实现表格隔行换色
  5. .NET Core中遇到的一些坑的图文详解
  6. .net core使用Redis发布订阅方法介绍
  7. C#中关于List<T>的并集与交集以及差集解
  8. C#中发送邮件的实现方法详解
  9. C# 数组作为参数传递出现的问题解决
  10. C#中引用类型之特例string的详细介绍