阮一峰 Flex基础
阮一峰 Flex简单布局实例

左上—-左到右

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         #box {
  8.             height: 600px;
  9.             width: 100%;
  10.             background-color: aqua;
  11.             display: flex;
  12.         }
  13.         .item {
  14.             height: 100px;
  15.             width: 100px;
  16.             background-color: red;
  17.             margin: 10px;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <div id="box">
  23.     <div class="item"></div>
  24.     <div class="item"></div>
  25.     <div class="item"></div>
  26.     <div class="item"></div>
  27. </div>
  28. </body>
  29. </html>

上中—-左到右

image.png

  1. .box {
  2.   display: flex;
  3.   justify-content: center;
  4. }

右上—-左到右

image.png

  1. .box {
  2.   display: flex;
  3.   justify-content: flex-end;
  4. }

左中—-左到右

image.png

  1. .box {
  2.   display: flex;
  3.   align-items: center;
  4. }

中心—-左到右

image.png

  1. .box {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5. }

中下—-左到右

image.png

  1. .box {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: flex-end;
  5. }

右下—-左到右

image.png

  1. .box {
  2.   display: flex;
  3.   justify-content: flex-end;
  4.   align-items: flex-end;
  5. }

均匀—-左上—-左到右

image.png

  1. .box {
  2.   display: flex;
  3.   justify-content: space-between;
  4. }

均匀—-左上—-上到下

image.png

  1. .box {
  2.   display: flex;
  3.   flex-direction: column;
  4.   justify-content: space-between;
  5. }

均匀—-中上—-上到下

image.png

  1. .box {
  2.   display: flex;
  3.   flex-direction: column;
  4.   justify-content: space-between;
  5.   align-items: center;
  6. }

均匀—-右上—-上到下

image.png

  1. .box {
  2.   display: flex;
  3.   flex-direction: column;
  4.   justify-content: space-between;
  5.   align-items: flex-end;
  6. }

栅格布局

简单布局

自动分配宽度。

image.png

  1. <div class="Grid">
  2.   <div class="Grid-cell">...</div>
  3.   <div class="Grid-cell">...</div>
  4.   <div class="Grid-cell">...</div>
  5. </div>
  1. .Grid {
  2.   display: flex;
  3. }
  5. .Grid-cell {
  6.   flex: 1;
  7. }

固定百分比

image.png

  1. <div id="box">
  2.     <div class="item">1</div>
  3.     <div class="item">2</div>
  4.     <div class="item u-1of3">3</div>
  5.     <div class="item">4</div>
  6. </div>
  1. #box {
  2.     height: 600px;
  3.     width: 100%;
  4.     background-color: aqua;
  5.     display: flex;
  6. }
  7. .item {
  8.     height: 100px;
  9.     background-color: red;
  10.     margin: 10px;
  11.     flex: 1;
  12. }
  13. .item.u-1of3 {
  14.     flex: 0 0 50%;   ## 加上这一句即可
  15. }

圣杯布局实例

flex布局 - 图14

html

  1. <body class="HolyGrail">
  2.   <header>...</header>
  3.   <div class="HolyGrail-body">
  4.     <main class="HolyGrail-content">...</main>
  5.     <nav class="HolyGrail-nav">...</nav>
  6.     <aside class="HolyGrail-ads">...</aside>
  7.   </div>
  8.   <footer>...</footer>
  9. </body>

css

  1. .HolyGrail {
  2.   display: flex;
  3.   min-height: 100vh;
  4.   flex-direction: column;
  5. }
  6. header,
  7. footer {
  8.   flex: 1;
  9. }
  10. .HolyGrail-body {
  11.   display: flex;
  12.   flex: 1;
  13. }
  14. .HolyGrail-content {
  15.   flex: 1;
  16. }
  17. .HolyGrail-nav, .HolyGrail-ads {
  18.   /* 两个边栏的宽度设为12em */
  19.   flex: 0 0 12em;
  20. }
  21. .HolyGrail-nav {
  22.   /* 导航放到最左边 */
  23.   order: -1;
  24. }

如果是小屏幕，躯干的三栏自动变为垂直叠加。

  1. @media (max-width: 768px) {
  2.   .HolyGrail-body {
  3.     flex-direction: column;
  4.     flex: 1;
  5.   }
  6.   .HolyGrail-nav,
  7.   .HolyGrail-ads,
  8.   .HolyGrail-content {
  9.     flex: auto;
  10.   }
  11. }