flex的相关应用

学习了flex相关语法之后，可能需要一些例子来说明其常见的应用场景。在这篇文章当中，我将举几个简单的例子加以说明。

水平/垂直居中

在flex出来以前，我们使用各种奇淫技巧来让一个元素居中，例如绝对定位、transform、vertical-align等。他们都有一个普遍的特点，那就是过于复杂。

有了flex之后，我们可以通过设置justify-content与align-items的值为center，让项目在主轴和交叉轴居中对齐，实现水平/垂直居中

image

  1. <div class="box">
  2.     <div class="content">我是子元素，我要垂直居中</div>
  3. </div>
  1. .box {
  2.     display: flex;
  3.     align-items: center;
  4.     justify-content: center;
  5.     height: 500px;
  6.     width: 500px;
  7.     background-color: green;
  8. }
  9. .content {
  10.     height: 200px;
  11.     width: 200px;
  12.     background-color: yellow;
  13.     line-height: 200px;
  14.     text-align: center;
  15. }

两栏/三栏布局

在flex出来以前，我们使用各种奇淫技巧实现两栏/三栏布局，通过基于float、margin等来实现两栏/三栏布局，代码过于冗余。

但是现在我们可以利用flex，我们可以很容易实现页面布局中的常见问题：两栏/三栏布局。

image

  1. <div class="box">
  2.     <div class="left">left</div>
  3.     <div class="main">main</div>
  4. </div>
  5. <div class="box">
  6.     <div class="left">left</div>
  7.     <div class="main">main</div>
  8.     <div class="right">right</div>
  9. </div>
  1. .box {
  2.     display: flex;
  3.     height: 200px;
  4.     margin-bottom: 30px;
  5. }
  6. .left {
  7.     background-color: yellow;
  8.     flex-basis: 200px;
  9.     /* flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 */
  10.     flex-grow: 0;
  11.     /* flex-grow定义该项目不分配剩余空间 */
  12. }
  13. .main {
  14.     background-color: green;
  15.     flex-grow: 1;
  16.     /* flex-grow定义main占满剩余空间 */
  17. }
  18. .right {
  19.     background-color: blue;
  20.     flex-basis: 100px;
  21.     flex-grow: 0;
  22. }

等分宽高

在常见页面布局中，我们常常遇到这样的情况：导航栏中我们需要等分宽，通常情况我们会做一个算术，计算出导航栏每项的宽度百分比。

但实际上，一旦想要增加或删除一项，我们就得重新计算，极为不方便（当然像现代化的前端框架如React可以带入算式计算，这里不做累述）。

有了flex布局方式后，做出的等分宽高就更为方便了。

image

  1. <nav>
  2.     <a href="#">苟</a>
  3.     <a href="#">利</a>
  4.     <a href="#">国</a>
  5.     <a href="#">家</a>
  6.     <a href="#">生</a>
  7.     <a href="#">死</a>
  8.     <a href="#">以</a>
  9. </nav>
  1. nav {
  2.     display: flex;
  3. }
  4. a {
  5.     flex-grow: 1;
  6.     font-size: 30px;
  7.     text-decoration: none;
  8.     text-align: center;
  9. }

圣杯布局

圣杯布局也就是像下面这幅图那样：
image

记得很久之前看到过的一篇文章那些年，奇妙的圣杯与双飞翼，还有负边距，里面详细讲述了通过传统页面布局方式实现圣杯布局的过程。内容之丰富，代码之华丽。

现在有了flex布局之后，我们实现圣杯布局也就简单而方便。

image

  1. <div class="box">
  2.     <header>header</header>
  3.     <div class="content">
  4.         <main>main</main>
  5.         <nav>nav</nav>
  6.         <aside>aside</aside>
  7.     </div>
  8.     <footer>footer</footer>
  9. </div>
  1. .box {
  2.     display: flex;
  3.     flex-direction: column;
  4.     width: 100%;
  5.     height: 500px;
  6.     background-color: yellow;
  7.     text-align: center;
  8.     font-size: 30px;
  9. }
  10. header, footer {
  11.     flex: 0 0 80px;
  12.     line-height: 80px;
  13. }
  14. header {
  15.     background-color: pink;
  16. }
  17. footer {
  18.     background-color: gray;
  19. }
  20. .content {
  21.     display: flex;
  22.     flex: 1;
  23. }
  24. nav {
  25.     order: -1;
  26.     background-color: blue;
  27.     flex: 0 0 80px;
  28. }
  29. aside {
  30.     background-color: green;
  31.     flex: 0 0 80px;
  32. }
  33. main {
  34.     flex: 1;
  35. }

固定底栏

在刚才的圣杯布局中，如果整个容器的内容并不是那么多，footer便会提升到上边，显得十分不好看。

我们给圣杯布局的容器 .box加上min-height:100vh;，让它的最小高度占满整个浏览器窗口。由于我们的content的flex-grow属性为1，我们便能够让主体部分的高度占满剩余高度了，而不是要去使用CSS3的calc()这个API进行高度计算了。

流式布局

在实际运用中我们通常会遇到：容器中，每行的项目数固定，并自动分行的情况。

如图所示：

image

image

image

  1. <h1>10个</h1>
  2. <div class="box">
  3.     <div class="content"></div>
  4.     <div class="content"></div>
  5.     <div class="content"></div>
  6.     <div class="content"></div>
  7.     <div class="content"></div>
  8.     <div class="content"></div>
  9.     <div class="content"></div>
  10.     <div class="content"></div>
  11.     <div class="content"></div>
  12.     <div class="content"></div>
  13. </div>
  1. .box {
  2.     display: flex;
  3.     flex-flow: row wrap;
  4.     height: 300px;
  5.     width: 400px;
  6.     background-color: yellow;
  7. }
  8. .content {
  9.     flex: 0 0 25%;
  10.     background-color: blue;
  11.     border: 2px solid red;
  12.     box-sizing: border-box;
  13. }

结合响应式布局的综合运用

这是一道来自百度前端技术学院-task10：Flexbox 布局练习的习题，实现以下布局方式：

image

  1. <div class="box">
  2.     <div class="box1"></div>
  3.     <div class="box2"></div>
  4.     <div class="box3"></div>
  5.     <div class="box4"></div>
  6. </div>
  1. .box div{
  2.     width: 150px;
  3.     padding: 20px;
  4. }
  5. .box1 {
  6.     height: 120px;
  7.     background-color: red;
  8. }
  9. .box2 {
  10.     height: 100px;
  11.     background-color: blue;
  12. }
  13. .box3 {
  14.     height: 40px;
  15.     background-color: pink;
  16. }
  17. .box4 {
  18.     height: 200px;
  19.     background-color: yellow;
  20. }
  21. @media (min-width: 640px) {
  22.     .box {
  23.         display: flex;
  24.         flex-direction: row;
  25.         justify-content: space-between;
  26.         align-items: center;
  27.     }
  28. }
  29. @media (max-width: 640px) {
  30.     .box {
  31.         display: flex;
  32.         flex-direction: row;
  33.         align-items: flex-start;
  34.         justify-content: space-between;
  35.         flex-wrap: wrap;
  36.     }
  37.     .box4 {
  38.         order: -1;
  39.     }
  40. }

参考资料：