flex基础:flex容器中的四个属性的功能,参数,以及作用

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>