flex容器

flex容器


作业内容:实例演示flex容器与项目中常用的属性,并写出功能


  • flex-flow
    主轴方向是否换行

    • 效果图
      flex-flow
    • 代码

      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. <style>
      9. /* flex-flow */
      10. :root {
      11. font-size: 10px;
      12. }
      13. body {
      14. font-size: 1.6rem;
      15. }
      16. .container {
      17. /* 转为flex容器,这样就可以使得flex特征进行布局了 */
      18. display: flex;
      19. border: 1px dashed;
      20. /* flex-direction:row; */
      21. width:40rem;
      22. background-color:wheat;
      23. /* flex-wrap: wrap; */
      24. /* flex-flow:主轴方向 是否换行; */
      25. /* 有换行:多行容器 */
      26. /* 多行容器中,每一行都有一根主轴 */
      27. flex-flow:row wrap;
      28. }
      29. /* flex项目必须是flex容器的直直接子元素 */
      30. .container > .item {
      31. /* 项目默认可收缩但不会放大 */
      32. padding: 1rem;
      33. height: 10rem;
      34. background-color: lightcyan;
      35. border: 1px solid;
      36. }
      37. /* 1.任何一个可视元素,添加display:flex后都可转为flex弹性容器 */
      38. /* 2.flex弹性容器内的直接子元素称之为flex项目,它是真正的布局目标对象 */
      39. </style>
      40. </head>
      41. <body>
      42. <div class="container">
      43. <div class="item">item1</div>
      44. <div class="item">item2</div>
      45. <div class="item">item3</div>
      46. <div class="item">item4</div>
      47. <div class="item">item5</div>
      48. <div class="item">item6</div>
      49. <div class="item">item7</div>
      50. <div class="item">item8</div>
      51. </html>

  • justify-content:
    在主轴上的对齐方式
    flex-start 左对齐
    flex-end 右对齐
    space-between 两端对齐
    space-around 分散对齐
    space-evenly 平均对齐
    • 效果图
      justify-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>flex项目在主轴上是如何对齐的</title>
      8. <style>
      9. :root {
      10. font-size: 10px;
      11. }
      12. body {
      13. font-size: 1.6rem;
      14. }
      15. .container {
      16. display: flex;
      17. border: 1px dashed;
      18. height: 20rem;
      19. justify-content: flex-start;
      20. justify-content: flex-end;
      21. justify-content: center;
      22. /* 两端对齐 */
      23. justify-content: space-between;
      24. /* 分散对齐 */
      25. justify-content:space-around;
      26. /* 平均对齐 */
      27. justify-content: space-evenly;
      28. }
      29. .container > .item {
      30. padding: 1rem;
      31. height: 10rem;
      32. background-color: lightcyan;
      33. border: 1px solid;
      34. }
      35. </style>
      36. </head>
      37. <body>
      38. <div class="container">
      39. <div class="item">item1</div>
      40. <div class="item">item2</div>
      41. <div class="item">item3</div>
      42. <div class="item">item4</div>
      43. </html>

  • align-items
    交叉对齐
    stretch拉伸
    flex-start顶端对齐
    flex-end 底端对齐
    center 居中对齐
    • 效果图
      align-items
    • 代码
      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. <style>
      9. :root {
      10. font-size: 10px;
      11. }
      12. body {
      13. font-size: 1.6rem;
      14. }
      15. .container {
      16. display: flex;
      17. border: 1px dashed;
      18. height: 20rem;
      19. justify-content: flex-start;
      20. justify-content: flex-end;
      21. justify-content: center;
      22. /* 两端对齐 */
      23. justify-content: space-between;
      24. /* 分散对齐 */
      25. justify-content:space-around;
      26. /* 平均对齐 */
      27. justify-content: space-evenly;
      28. /* 交叉轴对齐 */
      29. /* 拉抻 */
      30. align-items: stretch;
      31. align-items:flex-start;
      32. align-items: flex-end;
      33. align-items:center;
      34. }
      35. .container > .item {
      36. padding: 1rem;
      37. /* height: 10rem; */
      38. background-color: lightcyan;
      39. border: 1px solid;
      40. }
      41. </style>
      42. </head>
      43. <body>
      44. <div class="container">
      45. <div class="item">item1</div>
      46. <div class="item">item2</div>
      47. <div class="item">item3</div>
      48. <div class="item">item4</div>
      49. </html>