flex初体验之常用属性练习

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>Document</title>
  8. </head>
  9. <style>
  10. * {
  11. margin: 0px;
  12. padding: 1px;
  13. box-sizing: border-box;
  14. }
  15. .container{
  16. display: flex;
  17. height: 20rem;
  18. /* 居中 */
  19. justify-content: center;
  20. /* 从做往右 */
  21. justify-content: flex-start;
  22. /* 从右往左 */
  23. justify-content: flex-end;
  24. /* 若设置对齐方式 以上左右居中将无效 */
  25. /* 二端对齐 */
  26. justify-content: space-between;
  27. /* 分散对齐 相邻两个会有左右相加的距离 */
  28. justify-content: space-around;
  29. /* 平均对齐 */
  30. justify-content: space-evenly;
  31. background-color: lawngreen;
  32. }
  33. .container > .item {
  34. width: 5rem;
  35. height: 15rem;
  36. align-content: center;
  37. background-color: lightcoral;
  38. }
  39. .container1 {
  40. display: flex;
  41. background-color: lightpink;
  42. height: 15rem;
  43. flex-direction: column;
  44. }
  45. .container1 > .item {
  46. display: flex;
  47. height: 15rem;
  48. justify-content: center;
  49. background-color:lightslategray;
  50. }
  51. .container1 > .item:first-of-type{
  52. background-color:magenta;
  53. }
  54. .container1 > .item:last-of-type{
  55. background-color: lightcoral;
  56. }
  57. </style>
  58. <body>
  59. <!-- flex 只影响当前子元素,不仅不会影响子元素内的子元素,且flex可以嵌套 -->
  60. <div class="container">
  61. <div class="item">1</div>
  62. <div class="item">2</div>
  63. <div class="item">3</div>
  64. </div>
  65. <div class="container1">
  66. <div class="item">1</div>
  67. <div class="item">2</div>
  68. <div class="item">3</div>
  69. </div>
  70. </body>
  71. </html>