flex容器以及属性

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. font-size: 10px;
  14. }
  15. body {
  16. font-size: 2rem;
  17. }
  18. .con {
  19. border: 2px solid;
  20. height: 30rem;
  21. display: flex;
  22. /* 转换为flex容器 ,用属性布局*/
  23. /* 主轴的方向 */
  24. /* flex-direction: row; */
  25. /* 水平方向,起始左端 */
  26. /* flex-direction: row-reverse; */
  27. /* 水平方向,起始右端 */
  28. /* flex-direction: column; */
  29. /* 主轴垂直方向,起始上端 */
  30. /* flex-direction: column-reverse; */
  31. /* 垂直方向,起始下端 */
  32. /* 、、、、、、、、、、、、、、、、、、、、、、、、、、、、 */
  33. /* flex-wrap: wrap; */
  34. /* 可以换行 */
  35. flex-wrap: nowrap;
  36. /* 不换行 */
  37. /* flex-wrap: wrap-reverse; */
  38. /* 可以换行,第一行在下面 */
  39. /* flex-flow: row nowrap; */
  40. /* justify-content: center; */
  41. /* 居中显示项目 */
  42. /* justify-content: flex-start; */
  43. /* 左对齐方式 */
  44. /* justify-content: flex-end; */
  45. /* 右对齐 */
  46. /* justify-content: space-between; */
  47. /* 两端对齐方式 */
  48. /* justify-content: space-around; */
  49. /* 项目两端的距离相等 */
  50. /* align-items: flex-start; */
  51. /* 与交叉轴的起点对齐 */
  52. /* align-items: flex-end; */
  53. /* 与交叉轴的终点对齐 */
  54. /* align-items: center; */
  55. /* 与交叉轴的中点对齐 */
  56. /* align-items: center; */
  57. /* align-items: stretch; */
  58. /* 默认值 */
  59. /* order: 5; */
  60. /* style="order */
  61. /* 数值越小越靠前 */
  62. }
  63. .con > .item {
  64. padding: 3rem;
  65. background-color: rgb(224, 237, 255);
  66. border: 2px solid;
  67. }
  68. </style>
  69. </head>
  70. <body>
  71. <div class="con">
  72. <div class="item">item1</div>
  73. <div class="item">item2</div>
  74. <div class="item">item3</div>
  75. <div class="item" style="order: 3">item4</div>
  76. <div class="item">item5</div>
  77. <div class="item" style="order: 2">item6</div>
  78. <div class="item">item7</div>
  79. </div>
  80. </body>
  81. </html>