Day 5 : HTML - 网页排版超强神器，CSS Flex到底是什麽？

这篇想和大家聊聊CSS Flex到底是什麽东西
它是个超好用的排版工具，也是它拯救了我 (详情可看Day 2)
用它来做网页非常容易达到响应式
因为它有极强大的适应能力，可以随着网页缩放去改变比例
是个目前很夯的排版神器(grid也是)

Flex常见的语法有:

1. display (注意：这里如果没设成flex，底下语法都无法使用喔!!!)
2. flex-wrap
3. flex-direction
4. flex-flow (可以同时设定flex-direction和flex-wrap)
5. justify-content
6. align-item
7. align-content
8. align-self
9. order
10. flex (flex-grow、flex-shrink、flex-basis)

那到底该怎麽使用Flex呢？
别急别急，让我和各位娓娓道来

1.display
首先，先看一下我们的HTML代码:

<div class="flex_container">
    <div class="font box box_normal">1</div>
    <div class="font box box_short">2</div>
    <div class="font box box_normal">3</div>
    <div class="font box box_short">4</div>
    <div class="font box box_long">5</div>
    <div class="font box box_short">6</div>
    <div class="font box box_normal">7</div>
    <div class="font box box_short">8</div>
    <div class="font box box_long">9</div>
    <div class="font box box_normal">10</div>
</div>

CSS:

.flex_container {
    border:solid 5px rgb(216, 30, 30);
    height:950px;
    margin:2%;
}
.font {
    color:#fff;
    text-align:center;
    font-size:50px;
}
.box {
    background-color:rgb(124, 185, 25);
    margin:0.5%;
width:275px;
}
.box_normal {
    height:200px;
    line-height:200px;
}
.box_short {
	height:100px;
    line-height:100px;
}
.box_long {
    height:300px;
    line-height:300px;
}

在还没设置display:flex前长这样:

我现在在css里设置display:flex
(注意：是设置在container喔！因为display是外容器(container)属性，设置在里面的box是没用的，因为它们都是内元件(item)属性)

.flex_container {
    display:flex;
}

结果如下图所示:

2.flex-wrap
我们现在已经成功启用flex了
但我们的box却都挤在同一列，导致我们原本设定的box样式都不一样了，把我的box还来R!!!

会挤在一起的原因是，你没有告诉它能不能换行，因为flex的预设是不换行的
这时flex-wrap的作用就来了，它是用来告诉flex「能不能换行」
如果能换行，它就会在超过container预设的宽度时自动换行

可用属性有以下三种:

1. nowrap (预设值)
2. wrap (换行)
3. wrap-reverse (换行，且行顺序反转)

让我们看以下范例

CSS:

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

结果如下图所示:

3.flex-direction
Flex有分「主轴(row)」和「交错轴(column)」，你也可以把它想成矩阵的形式

Flex-direction决定的是内元件的「排列方向」

可用属性有以下四种:

1. row (预设值，由左至右，从上到下)
2. row-reverse (排列方向和row一样，但内元件顺序会反转)
3. column (先从上到下，再由左至右)
4. column-reverse (排列方向和column一样，但内元件顺序会反转)

让我们看以下范例

CSS:

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

结果如下图所示:

4.flex-flow
flex-flow是flex-direction和flex-wrap的缩写
它可以接受两个属性的值，没有前後顺序之分，中间用空格隔开即可
CSS:

.flex_container {
    flex-direction:column;
	flex-wrap:wrap;
}

可写成

.flex_container {
    flex-flow:column wrap;
}

5.justify-content
justify-content是用来控制Flex「水平对齐」的位置，也就是主轴方向
以主轴的「起点」和「终点」来做依据

可用属性有以下六种:

1. Flex-start (预设值)
2. Flex-end
3. Center
4. Space-around
5. Space-between
6. Space-evenly

让我们看以下范例

CSS:

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

结果如下图所示:

从主轴的「起点」开始排

从主轴的「终点」开始排

排在「起点」和「终点」的中间

Space-between是平均分配「元素」位置，但左右两侧会贴齐主轴的起点、终点

这里想把space-around和space-evenly拿来一起讲
因为常常会有人分不清楚这两者的差异

Space-around是平均分配「元素」位置，但左右两侧的间距会较小
Space-evenly是「元素」和「左右两侧」的间距皆相同

6.align-item
和jusitfy-content的用法类似，但它是用来控制「垂直对齐」的位置，也就是交错轴方向

可用属性有以下五种:

1. Stretch (预设值，要测试请记得内元素不能设定height)
2. flex-start
3. flex-end
4. center
5. baseline

让我们看以下范例

CSS:

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

结果如下图所示:

Stretch是align-item的预设值，会往交错轴方向将内元素全部填满
如果你有设置height，则不会起作用

从交错轴的「起点」开始排

从交错轴的「终点」开始排

这边想把center和baseline拿来一起讲
因为这两个真的长的超像超像世界无敌像 (认真)
但还是有些微差异在

请看center的图，上面有两条紫色的线，它们都刚好对齐在数字的中间
再看baseline的图，你会发现紫色的线在数字的下方
没错！差异就在这里
不管字体大小，baseline都是以「字体下方」去做对齐

7.align-content
align-content是用来控制Flex的「行」在「水平方向」的对齐位置
所以如果想使用align-content，一定要设flex-wrap:wrap
因为它是控制「行」，一定要有多行才能触发

可用属性有以下七种:

1. stretch
2. flex-start
3. flex-end
4. center
5. space-around
6. space-between
7. space-evenly

让我们看以下范例

CSS:

.flex_container {
	flex-wrap:wrap;　/*一定要有才能触发flex-content！*/
    align-content:stretch | flex-start | flex-end | center | space-around | space-between | space-evenly;
}

结果如下图所示:

Stretch是align-content的预设值，每行将拉伸以填满剩余空间

从交错轴的「起点」开始排

从交错轴的「终点」开始排

排在「起点」和「终点」的中间

Space-around是平均分配「行」的位置，但上下两侧的间距会较小

Space-between是平均分配「行」的位置，但上下两侧会贴齐交错轴的起点、终点

Space-evenly是「元素」和「上下两侧」的间距皆相同

8.align-self
align-self和align-item的功能一样，但它是针对「单一」对象

可用属性有以下五种:

1. Stretch (预设值，要测试请记得内元素不能设定height)
2. flex-start
3. flex-end
4. center
5. baseline

让我们看以下范例

CSS:
(这里我们将align-self设置在box_short上，也就是box2、4、6、8)

.box_short {
    align-self:stretch;
}

结果如下图所示:

Stretch是预设值，box_short会往交错轴方向将内元素全部填满
如果你有设置height，则不会起作用

box_short会从交错轴的「起点」开始排

box_short会从交错轴的「终点」开始排

box_short会排在「起点」和「终点」的中间

box_short会排在「字体下方」

9.order
order预设值为0，它可以重新定义内元件的排列顺序，顺序会依照数值的大小排列

让我们看以下范例

CSS:

.box_normal {
    order:1;
}
.box_short {
    order:2;
}

结果如下图所示:

CSS:

.box_normal {
    order:-1;
}
.box_short {
    order:1;
}

结果如下图所示:

10.Flex (flex-grow、flex-shrink、flex-basis)
这里想和大家聊聊Flex的空间分配
Flex是flex-grow、flex-shink、flex-basis的缩写
那它们到底是什麽呢？别急！我立马说给你听

但首先，请先去HTML把4～10的box都删掉
并把container的height改成220px，并加上width:1800px

.flex_container {
    height:220px;
    width:1800px;
}

结果如下图所示:

好，事不宜迟，赶紧向各位介绍这三种属性

Flex-grow
Flex-grow预设值为0，它会依照你设定的值去分配剩余空间

我们现在在box_short设置flex-grow:1，等於把剩余空间分成「1等分」给box_short

再把box_normal设置flex-grow:2，就等於把剩余空间分成「3等分」，再分别分给3个box

Flex-shrink
Flex-shrink是当空间不够时，所压缩的比例，预设值为1，代表大家所压缩的比例一样

我们现在先把三个box都设置flex-shrink:0，代表三个box都不被压缩，它就会直接爆出container外面

再试试只把flex-shrink:0设置在box_normal，这样就会只压缩box_short

至於压缩的多寡，是根据不同box的宽度去分配，请看以下范例

Flex-basis
Flex-basis和width本质上一样，但优先顺序较width高，预设值为auto

如果我们同时在box_short设置Flex-basis:50px、width:100px
则box_short的宽会是50px，而不是100px

以上就是Flex的介绍
非常的长，但希望各位能耐心看完，保证收获良多！！
只要你会Flex，就没有什麽网页难的倒你了！

另外，想和各位分享一个Flex的小游戏 (无业配啦哈哈)
https://flexboxfroggy.com/#zh-tw
是个用Flex帮青蛙回家的小游戏，可以让你快速理解Flex的操作
想多了解Flex的人可以去玩看看唷！

参考资料:
https://cssreference.io/flexbox/ (大推这个网站，里面写的很详细，且有全部CSS语法的使用方式、例子)
https://ithelp.ithome.com.tw/articles/10208741