欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

FlexBox弹性盒布局和order属性

程序员文章站 2022-03-24 09:33:36
...

1. FlexBox弹性盒布局

1.1 FlexBox弹性盒布局快速预览

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8">
    5. 

  5.         <meta name="viewport" content="width=device-width,initial-scale=1.0">
    6. 

  6.         <title>FlexBox弹性盒布局快速预览</title>
    7. 

  7.         <style>
    8. 

  8.             .container{
    9. 

  9.                 width: 300px;
    10. 

    11. 

  11.                 /* 如果这个容器中的内容要使用flexbox布局，第一步就是必须将这个容器转为弹性盒子 */
    12. 

  12.                 display: flex;
    13. 

  13.             }
    14. 

  14.             .container > .item{
    15. 

  15.                 /* 一旦将父元素转为弹性容器，内部的“子元素”就会自动成为：弹性项目 */
    16. 

  16.                 /* 不管这个项目标签之前是什么类型，统统转为“行内块” */
    17. 

  17.                 /* 行内：全部在一排显示 */
    18. 

  18.                 /* 块：可以设置宽和高 */
    19. 

  19.                 flex: auto;
    20. 

  20.                 /* width: 60px;
    21. 

  21.                 height: 60px; */
    22. 

    23. 

  23.             }
    24. 

  24.         </style>
    25. 

  25.     </head>
    26. 

  26.     <body>
    27. 

  27.         <div class="container">
    28. 

  28.             <div class="item">1</div>
    29. 

  29.             <span class="item">2</span>
    30. 

  30.             <a class="item">3</a>
    31. 

  31.             <a class="item">4</a>
    32. 

  32.             <a class="item">5</a>
    33. 

  33.             <a class="item">6</a>
    34. 

  34.             <a class="item">7</a>
    35. 

  35.         </div>
    36. 

  36.     </body>
    37. 

  37. </html>
    38.

FlexBox弹性盒布局和order属性

1.2 FlexBox弹性盒布局换行显示

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8">
    5. 

  5.         <meta name="viewport" content="width=device-width,initial-scale=1.0">
    6. 

  6.         <title>FlexBox弹性盒布局快速预览</title>
    7. 

  7.         <style>
    8. 

  8.             .container{
    9. 

  9.                 width: 300px;
    10. 

  10.                 /* 弹性容器 */
    11. 

  11.                 display: flex;
    12. 

  12.             }
    13. 

  13.             .container > .item{
    14. 

  14.                 /* width: 60px; */
    15. 

  15.                 /* width: 50px; */
    16. 

  16.                 width: 150px;
    17. 

  17.             }
    18. 

  18.             /* 换行显示 */
    19. 

  19.             .container{
    20. 

  20.                 flex-wrap: wrap;
    21. 

  21.             }
    22. 

  22.         </style>
    23. 

  23.     </head>
    24. 

  24.     <body>
    25. 

  25.         <div class="container">
    26. 

  26.             <div class="item">1</div>
    27. 

  27.             <div class="item">2</div>
    28. 

  28.             <div class="item">3</div>
    29. 

  29.             <div class="item">4</div>
    30. 

  30.             <div class="item">5</div>
    31. 

  31.             <div class="item">6</div>
    32. 

  32.         </div>
    33. 

  33.     </body>
    34. 

  34. </html>
    35.

FlexBox弹性盒布局和order属性

1.3 单行容器中的项目对齐方式

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8">
    5. 

  5.         <meta name="viewport" content="width=device-width,initial-scale=1.0">
    6. 

  6.         <title>单行容器中的项目对齐方式</title>
    7. 

  7.         <style>
    8. 

  8.             .container{
    9. 

  9.                 display: flex;
    10. 

  10.                 width: 300px;
    11. 

    12. 

  12.                 /* justify-content: 控制所有项目在主轴上的对齐方式; */
    13. 

  13.                 /* 本质是：设置容器中的剩余空间在所有“项目之间”的分配方案 */
    14. 

    15. 

  15.                 /* 1.容器剩余空间在所有项目两边的如何分配，将全部项目视为一个整体 */
    16. 

  16.                 /* justify-content: flex-start;
    17. 

  17.                 justify-content: flex-end;
    18. 

  18.                 justify-content: center; */
    19. 

  19.                 /* justify-content: start;
    20. 

  20.                 justify-content: left; */
    21. 

    22. 

  22.                 /* 2.容器剩余空间在所有项目之间的如何分配，将项目视为一个独立的个体 */
    23. 

  23.                 /* justify-content: space-between; */
    24. 

  24.                 /* 分散对齐：剩余空间在所有项目两侧评价分配 */
    25. 

  25.                 justify-content: space-around;
    26. 

  26.                 justify-content: space-evenly;
    27. 

    28. 

  28.             }
    29. 

  29.             .container > .item{
    30. 

  30.                 width: 60px;
    31. 

    32. 

  32.             }
    33. 

  33.         </style>
    34. 

  34.     </head>
    35. 

  35.     <body>
    36. 

  36.         <div class="container">
    37. 

  37.             <div class="item">1</div>
    38. 

  38.             <div class="item">2</div>
    39. 

  39.             <div class="item">3</div>
    40. 

  40.         </div>
    41. 

  41.     </body>
    42. 

  42. </html>
    43.

FlexBox弹性盒布局和order属性

1.4 多行容器中的项目对齐方式

由于代码过多重复只写重点代码：

    

  1.  <style>
    2. 

  2.             .container{
    3. 

  3.                 display: flex;
    4. 

  4.                 width: 300px;
    5. 

  5.                 /* 多行容器 */
    6. 

  6.                 flex-wrap: wrap;
    7. 

    8. 

  8.                 height: 150px;
    9. 

    10. 

  10.                 /* align-content: 设置多行容器中的项目排列; */
    11. 

    12. 

  12.                  /* 1.容器剩余空间在所有项目两边的如何分配，将全部项目视为一个整体 */
    13. 

  13.                 align-content: stretch;
    14. 

  14.                 align-content: flex-start;
    15. 

  15.                 align-content: flex-end;
    16. 

  16.                 align-content: center;
    17. 

    18. 

  18.                 /* 2.容器剩余空间在所有项目之间的如何分配，将项目视为一个独立的个体 */
    19. 

  19.                 align-content: space-between;
    20. 

  20.                 align-content: space-around;
    21. 

  21.                 align-content: space-evenly;
    22. 

    23. 

  23.             }
    24. 

  24.             .container > .item{
    25. 

  25.                 width: 60px;
    26. 

    27. 

  27.             }
    28. 

  28.         </style>
    29.

FlexBox弹性盒布局和order属性

1.5 主轴为垂直方向时的项目排列

    

  1. <style>
    2. 

  2.             .container{
    3. 

  3.                 display: flex;
    4. 

  4.                 width: 300px;
    5. 

  5.                 height: 150px;
    6. 

  6.                 /* 主轴方向：默认为行 */
    7. 

  7.                 /* flex-direction: row; */
    8. 

  8.                 flex-direction: column;
    9. 

    10. 

  10.                 /* 项目两边分配 */
    11. 

  11.                 justify-content: flex-start;
    12. 

  12.                 justify-content: flex-end;
    13. 

  13.                 justify-content: center;
    14. 

    15. 

  15.                 /* 项目之间分配 */
    16. 

  16.                 justify-content: space-between;
    17. 

  17.                 justify-content: space-around;
    18. 

  18.                 justify-content: space-evenly;
    19. 

  19.             }
    20. 

    21. 

  21.         </style>
    22.

FlexBox弹性盒布局和order属性

1.6 项目在交叉轴上的排列

    

  1. <style>
    2. 

  2.             .container{
    3. 

  3.                 display: flex;
    4. 

  4.                 width: 300px;
    5. 

  5.                 height: 200px;
    6. 

  6.                 /* 项目在交叉轴上默认是自动伸缩的 */
    7. 

  7.                 align-items: stretch;
    8. 

  8.                 align-items: flex-start;
    9. 

  9.                 align-items: flex-end;
    10. 

  10.                 align-items: center;
    11. 

    12. 

    13. 

  13.             }
    14. 

  14.             .container >.item{
    15. 

  15.                 width: 60px;
    16. 

  16.             }
    17. 

  17.         </style>
    18.

FlexBox弹性盒布局和order属性

1.7 flex容器属性实战：快速鲁一个主导航

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8">
    5. 

  5.         <meta name="viewport" content="width=device-scale=1.0">
    6. 

  6.         <title>flex容器属性实战：快速鲁一个主导航</title>
    7. 

  7.         <style>
    8. 

  8.             /* 初始化 */
    9. 

  9.             *{
    10. 

  10.                 padding: 0;
    11. 

  11.                 margin: 0;
    12. 

  12.                 box-sizing: border-box;
    13. 

  13.             }
    14. 

  14.             a{
    15. 

  15.                 text-decoration: none;
    16. 

  16.                 color: #ccc;
    17. 

  17.             }
    18. 

  18.             nav{
    19. 

  19.                 height: 40px;
    20. 

  20.                 background-color: #333;
    21. 

  21.                 padding: 0 50px;
    22. 

  22.                 /* 转为弹性盒布局 */
    23. 

  23.                 display: flex;
    24. 

  24.             }
    25. 

  25.             nav  a{
    26. 

  26.                 height: inherit;
    27. 

  27.                 line-height: 40px;
    28. 

  28.                 padding: 0 10px;
    29. 

  29.             }
    30. 

  30.             nav a:hover{
    31. 

  31.                 background-color: seagreen;
    32. 

  32.                 color: white;
    33. 

  33.             }
    34. 

  34.             /* 登录注册放在最右边 */
    35. 

  35.             nav a:last-of-type{
    36. 

  36.                 margin-left: auto;
    37. 

  37.             }
    38. 

  38.         </style>
    39. 

  39.     </head>
    40. 

  40.     <body>
    41. 

  41.         <header>
    42. 

  42.             <nav>
    43. 

  43.                 <a href="">首页</a>
    44. 

  44.                 <a href="">视频教程</a>
    45. 

  45.                 <a href="">社区问答</a>
    46. 

  46.                 <a href="">资源下载</a>
    47. 

  47.                 <a href="">登录/注册</a>
    48. 

  48.             </nav>
    49. 

  49.         </header>
    50. 

  50.     </body>
    51. 

  51. </html lang="en">
    52.

FlexBox弹性盒布局和order属性

2.order属性

2.1 order控制项目顺序

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8">
    5. 

  5.         <meta name="viewport" content="width=device-scale=1.0">
    6. 

  6.         <title>项目属性:order控制项目顺序</title>
    7. 

  7.         <style>
    8. 

  8.             .container{
    9. 

  9.                 width: 300px;
    10. 

  10.                 display: flex;
    11. 

    12. 

  12.             }
    13. 

  13.             .container > .item{
    14. 

  14.                 width: 60px;
    15. 

  15.             }
    16. 

  16.             .container > .item:first-of-type{
    17. 

  17.                 /* order: 默认是0; */
    18. 

  18.                 order: 3;
    19. 

  19.             }
    20. 

    21. 

  21.             .container > .item:last-of-type{
    22. 

  22.                 order: 5;
    23. 

  23.             }
    24. 

  24.         </style>
    25. 

  25.     </head>
    26. 

  26.     <body>
    27. 

  27.         <div class="container">
    28. 

  28.             <div class="item">1</div>
    29. 

  29.             <div class="item">2</div>
    30. 

  30.             <div class="item">3</div>
    31. 

  31.         </div>
    32. 

  32.     </body>
    33. 

  33. </html>
    34.

FlexBox弹性盒布局和order属性

2.2 order小案例，调整元素顺序

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8">
    5. 

  5.         <meta name="viewport" content="width=device-scale=1.0">
    6. 

  6.         <title>order小案例，调整元素顺序，比如小相册</title>
    7. 

  7.         <style>
    8. 

  8.             .container{
    9. 

  9.                 width: 300px;
    10. 

  10.                 display: flex;
    11. 

  11.                 flex-direction: column;
    12. 

  12.             }
    13. 

  13.             .container > .item{
    14. 

  14.                 border: 1px solid #000;
    15. 

  15.                 padding: 10px;
    16. 

  16.                 display: flex;
    17. 

    18. 

  18.                 position: relative;
    19. 

  19.             }
    20. 

  20.             .container >.item>div{
    21. 

  21.                 display: flex;
    22. 

  22.             }
    23. 

  23.         </style>
    24. 

  24.     </head>
    25. 

  25.     <body>
    26. 

  26.         <div class="container">
    27. 

  27.             <div class="item">
    28. 

  28.                 <div>1.jpg&nbsp;&nbsp;&nbsp;
    29. 

  29.                     <button onclick="up(this)">Up</button>
    30. 

  30.                     <button onclick="down(this)">down</button>
    31. 

  31.                 </div>
    32. 

  32.             </div>
    33. 

  33.             <div class="item">2.jpg&nbsp;&nbsp;&nbsp;
    34. 

  34.                 <div>
    35. 

  35.                     <button onclick="up(this)">Up</button>
    36. 

  36.                     <button onclick="down(this)">down</button>
    37. 

  37.                 </div>
    38. 

  38.             </div>
    39. 

  39.             <div class="item">3.jpg&nbsp;&nbsp;&nbsp;
    40. 

  40.                 <div>
    41. 

  41.                     <button onclick="up(this)">Up</button>
    42. 

  42.                     <button onclick="down(this)">down</button>
    43. 

  43.                 </div>
    44. 

  44.             </div>
    45. 

  45.         </div>
    46. 

  46.         <script>
    47. 

  47.             let up=(ele) => (ele.offsetParent.style.order -=1);
    48. 

  48.             let down=(ele) => (ele.offsetParent.style.order +=1);
    49. 

  49.         </script>
    50. 

  50.     </body>
    51. 

  51. </html>
    52.

FlexBox弹性盒布局和order属性

注意：个人建议使用火狐浏览器（FIREFOX）

上一篇： 浮动元素高度塌陷产生的原因与解决方案以及三列经典布局

下一篇： php怎么删除数组中重复的元素值

推荐阅读