[Day 06 - CSS] Flexbox带你飞，实现多样化的网页布局

为什麽要学 Flexbox ？还没学习 Flexbox 的我们，想要让文字段落并排显示时，只能调整元素的宽度让它为了适应大小自动换行，这样实在太不方便了！为了能调出想像中的版面， Flexbox 就由此而生。

还没学习 Flexbox 的时候... （图内文章引用自MDN Web Docs - Flexbox）

Flexbox

简单来说，Flex 排版就是将元素放进一个弹性的容器里面进行排版，内部的元素可以在容器里面依照各种方向来排列，而容器也可以任意扩张或缩放，控制内容空间的大小。

只要在指定的元素设置 display 属性为 flex，该元素就会变成上图蓝色部分的外容器 (Container)：

display: flex;

定义排列方向

内元素 (item) 的排列方式到底有哪些？每一个弹性容器内都会设置两个轴 (Axes) — 主要轴 (main axis) 和 交错轴 (cross axis)。盒子里的元素就依据主要轴的方向来排列，交错轴则是垂直於主轴的规则线。

可以在外容器设置 flex-direction，更改主轴的方向，预设值是 row：

flex-direction: row | row-reverse | column | column-reverse;

一般情况下，元素会沿着主轴的方向呈一直线排列下去，当然也有让元素换行排列的设定 flex-wrap ，预设值是 nowrap 不换行：

flex-wrap: nowrap | wrap | wrap-reverse;

设定元素对齐方式

• justify-content：设定主轴方向的对齐模式，预设值是 flex-start：

  justify-content: flex-start | flex-end | center | space-between | space-around;
  

  

• align-items：设定交错轴方向的对齐模式，预设值是 stretch：

  align-items: stretch | flex-start | flex-end | center | baseline;
  

  

• align-content：align-items的另一个版本，设定多行(Wrap) 的情况下，交错轴方向的对齐模式。

  

以上都是透过在外容器设定内部元素的排列对齐方式，那当我们想要针对内元素设定个别的指令，比如：我想要只有第二个元素置中，该怎麽做？

可以使用 align-self，设定个别元素交错轴方向的对齐模式，会覆盖掉外容器 align-item 的设定，预设值是 auto：

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

有了 Flexbox 之後

怎麽样，认识了 Flexbox 之後，是不是觉得所有的网页元素都在你的掌握之中，你想要它去哪就去哪。让我们搭时光机回到最开始，这次就利用 Flex 排版来让文章并排显示，做出想要的排版。

原始 HTML

<h1>Flex Box</h1>
<h2>The two axes of flexbox</h2>
<p>When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it. Everything we do with flexbox refers back to these axes, so it is worth understanding how they work from the outset.</p>
<h3>The main axis</h3>
<p>The main axis is defined by flex-direction, which has four possible values:row/row-reverse/column/column-reverse</p>
<h3>The cross axis</h3>
<p>The cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns.</p>

原始 CSS

body{
  background-color: #C5DECD;
}
h1,h2,h3,p {
  font-family: "Noto Sans CJK TC";
  color: #495159;
}

用 Flexbox 的逻辑，想像一下文章并排的话：

• 内元素（黄色区域）：将一体的文章 Group 起来
• 外容器（蓝色区域）：负责将内元素排成以左到右并排显示

目前少了蓝色和黄色的容器，新增 <div class="flex-item"> 当作内元素（黄色区域），将两块文章包起来：

<div class="flex-item">
    <h3>The main axis</h3>
    <p>The main axis is defined by flex-direction...</p>
</div>
<div class="flex-item">
    <h3>The cross axis</h3>
    <p>The cross axis runs perpendicular to the main axis...</p>
</div>

再来是控制排列方式的外容器（蓝色区域），新增 <div class="flex-container"> ，将要并排显示的内元素（黄色区域）包起来：

<div class="flex-container">
    <div class="flex-item">
        ...
    </div>
    <div class="flex-item">
        ...
    </div>
</div>

配置完 Flexbox 的必备品外容器和内元素，但还没加上让外容器变成弹性盒子的样式属性，只要在 CSS 设定 .flex-container 成为 Flex 容器：

.flex-container{
  display: flex;
}

大功告成！才加一段程序码太简单了吧！因为 flow-direction 的预设值是 row ，所以只要将容器变成 Flex box，内部的文章就会自动以由左往右的方向去排列，自然就变成并排的模式。

另外你还可以参考 FlexboxFroggy，透过练习移动小青蛙成为Flex大师

小结

当然不只有像本文举例的，还有各式各样的网站版面，但大家只要熟记 Flexbox 的思考模式，之後遇到什麽样的排版都能轻而易举做出来！而除了 Flexbox ，另一个很热门的网页布局方式 — CSS Grid，与 Flexbox 各有优势，也是一套很方便的排版工具，就留给大家慢慢学习罗。明天的章节会提到调整网页因应不同装置萤幕大小的概念 — RWD 响应式网页设计，那我们就下章再会罗！

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️

参考资料

• MDN Web Docs - Flexbox