浅谈CSS Flexbox

一个容器 & 两条线

图片来源：https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

先看过最重要的7个部分，再介绍它们的用法。

容器(flex container)：所有要排列的项目都必须放入此容器中。主轴 (main axis)：决定元素是「水平」或「垂直」排列。交错轴 (cross axis)：与主轴 (main axis)垂直，决定元素的「对齐位置」。主轴起点 (main start)：预设排列起始点，最左边。主轴终点 (main end)。交错轴起点 (cross start)：预设贴齐位置点，最上方。交错轴终点 (cross end)。

flex container(容器)的属性

display
顾名思义，容器装的就是我们要排列的元素，要让元素能够使用Flexbox方式排版，首先要做的就是先在容器 .flex的display属性设定flex，Flexbox才会作用。

  <div class="flex">    <div class="item1">1</div>    <div class="item2">2</div>    <div class="item3">3</div>  </div>

.flex {      display: flex;    }

flex-direction
决定元素「水平」或「垂直」排列。
主要设定「主轴」的方向，若主轴为「水平」，则交错轴为「垂直」，反之亦然。

.flex {       display: flex;    flex-direction: row | row-reverse | column | column-reverse ;}

总共有4种：

row：预设值，由左至右。
row-reverse：由右至左。
column：由上而下。
column-reverse：由下而上。

justify-content
元素在主轴上的对齐方式。

.flex {      display: flex;  justify-content: flex-start | flex-end | center | space-around | space-between;}

总共有5种：

flex-start：预设值，贴齐主轴起点。

flex-end：贴齐主轴终点。

center：置中。

space-around：平均分配间隔，每个元素都有等距的间隔。

space-between：平均分配间隔，邻近边界元素，会贴齐主轴起点/终点。

align-items
元素在交错轴上的对齐方式。

.flex {      display: flex;  align-items: flex-start | flex-end | center | stretch | baseline;}

总共有5种：

flex-start：贴齐交错轴起点。
flex-end：贴齐交错轴终点。
center：置中。
stretch：预设值，若元素未设置高度，将延展至容器的长或宽。
baseline：对齐元素的基线。

flex-wrap
元素的数量超出容器的範围时，是否换行。

.flex {      display: flex;  flex-wrap: wrap | nowrap | wrap-reverse;}

总共有3种：

wrap：换行。

nowrap：预设值，不换行，元素的长/宽会压缩。

wrap-reverse：换行反转。

align-content
多行的排列方式。

.flex {      display: flex;  align-content: flex-start | flex-end | center | space-around | space-between | stretch;}

总共有6种：

flex-start：预设值，贴齐交错轴起点。
flex-end：贴齐交错轴终点。
center：置中。
space-around：平均分配间隔，每行上下都有等距的间隔。
space-between：平均分配间隔，邻近边界行，会贴齐交错轴起点/终点。
stretch：若元素未设置高度，会延展至该行的高度。

内部元素的属性

刚刚介绍的都是flex container(容器)的属性，每个属性值的设定，影响的是包含的所有元素，如若我们要特别设定某个元素，可以在该元素的属性值上设定。

align-self：
设定该元素在交错轴上的对齐方式。
以box2为例：

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

总共有6种：auto：预设值，使用align-items的设定。
flex-start：贴齐交错轴起点。
flex-end：贴齐交错轴终点。
center：置中。
baseline：对齐元素的基线。
stretch：若元素未设置高度，将延展至容器的长或宽。
order：
自订个别元素的排列顺序，由小到大依序排列。

.item1 {      order: 3;}.item2 {  order: 1;}.item3 {  order: 2;}

以上所介绍的，是Flexbox的基础，搭配各种不同的属性值，可以呈现千变万化的排版方式。

还有一个元素的属性值「flex」，比较进阶，我打算下个篇幅再介绍。

最后，来个小小的应用练习，使用flex排出如下的左边logo图，右边menu的header吧。

重点提示：该如何让logo图与menu群组分别置于header的两侧呢？可以使用margin-right: auto;的技巧，把menu群组推到另一侧。

参考资料：
CSS Flexible Box Layout