第五课 实例演示flex容器中的四个属性的功能,参数,以及作用

实例演示flex容器中的四个属性的功能,参数,以及作用

  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>FLEX布局</title>
  8. </head>
  9. <style>
  10. /* 初始化 */
  11. *{
  12. margin: 0;
  13. padding: 0;
  14. box-sizing: border-box;
  15. }
  16. :root{
  17. font-size: 10px;
  18. }
  19. body{
  20. font-size: 1.6rem;
  21. }
  22. .container{
  23. /* 转化为flex容器 */
  24. /* 自动成行内FLEX容器的项目,并且是行内块显示,项目与当前容器等高 */
  25. display: flex;
  26. height: 20rem;
  27. border: 1px solid red ;
  28. }
  29. /* 1、单行容器 */
  30. .container{
  31. /* 主轴方向,默认水平,行方向 */
  32. /* flex-direction: row; */
  33. /* 禁止换行 */
  34. /* flex-wrap: nowrap; */
  35. /* 以上两个简化: */
  36. /* flex-flow:主轴方向 是否换行 */
  37. /* flex-flow:row nowrap; */
  38. }
  39. /* 2、多行容器 */
  40. .container{
  41. /* 允许换行 */
  42. /* flex-flow: row wrap; */
  43. }
  44. .container{
  45. /* 主轴垂直 不换行 */
  46. /* flex-flow: column nowrap; */
  47. }
  48. .container{
  49. /* 主轴垂直 换行 */
  50. flex-flow:column wrap;
  51. }
  52. .container > .item{
  53. padding: 1rem;
  54. width: 30rem;
  55. background-color: aquamarine;
  56. border: 1px solid tomato;
  57. }
  58. </style>
  59. <body>
  60. <div class="container">
  61. <div class="item">item1</div>
  62. <div class="item">tem2</div>
  63. <div class="item">iter3</div>
  64. <div class="item">item4</div>
  65. <div class="item">tem5</div>
  66. <div class="item">iter6</div>
  67. <div class="item">item7</div>
  68. <div class="item">tem8</div>
  69. <div class="item">iter9</div>
  70. </div>
  71. </body>
  72. </html>