[Day5] 学 Bootstrap 是为了走更长远的路 ～ Flex 篇

前言

这几天写下来，
真的深深感受到我参加的是「自我挑战组」，
真的每天都在 自我挑战 跟天窗奋斗orz
而且没有会害队友团灭的压力在，
要能持续发文自制力要很高orz
好吧，头都洗下去了，加油啊~~~~~~~QAQ

本日正文

Flex 纯 HTML/CSS 传统写法

今天的主题是 Flex，
不过如果对 Flex 不太了解且不介意的话，
可以参考一下我去年写的文章XD → Day9 - 网页排版神器～CSS Flex
这边就不再针对 Flex 多做介绍。

Flex 真的是排版利器，
相信大家在排版也是很常用到 Flex，
但如果写纯 HTML/CSS 写 Flex 的话，
也是一样要在 CSS 写很多行，
这边一样举个小例子：

[HTML]

<div class="block1">1</div>
<div class="block11">
  <div class="sm_block">2-1</div>
  <div class="sm_block">2-2</div>
  <div class="sm_block">2-3</div>
</div>
<div class="block111">3</div>

[CSS]

.block1 {
  background-color: blue;
  margin-bottom: 10px;
  padding: 10px;
}

.block11 {
  background-color: green;
  margin-bottom: 10px;
  padding: 20px;
  padding-left: 10px
}

.block111 {
  background-color: orange;
  margin-bottom: 10px;
  padding: 10px;
}

.sm_block {
  background-color: #fff;
}

你想要让画面中的 2-1, 2-2, 2-3 区块横着摆一块一块，
用 Flex 如何达成呢？

是的，要在 .block11 的 CSS 里面多加这一行设定：
display: flex;
(PS. 然後为了不要挤在一起，我有在 .sm_block 多加 margin 跟 padding 的设定)

像这样：
[CSS]

.block11 {
  ...
  ...
  display: flex;
}

.sm_block {
  background-color: #fff;
  margin-right: 10px;
  padding: 5px;
}

那如果我此时想要 2-1, 2-2, 2-3 区块水平置中该怎麽做？
还必须要多加 justify-content: center 这一行设定。
像这样：
[CSS]

.block11 {
  ...
  ...
  display: flex;
  justify-content: center;
}

Bootstrap 也有支援 Flex！

那你会说，所以之後若要用到 Flex 还是必须得写 CSS 吗？
关於这点不用担心哦，
Bootstrap 也有提供 Flex 相关的语法设定~~~~~
Flex - Bootstrap

所以就算用到 Flex，
我们还是可以像昨天一样全部写在 HTML 就好，
不用另外再写 CSS 的设定哦~

因此用 Bootstrap 改写会是这样的：

<div class="mb-1 p-1 bg-primary">1</div>
<div class="mb-1 p-1 py-2 bg-info d-flex justify-content-center">
  <div class="bg-white mx-1 p-2">2-1</div>
  <div class="bg-white mx-1 p-2">2-2</div>
  <div class="bg-white mx-1 p-2">2-3</div>
</div>
<div class="mb-1 p-1 bg-warning">3</div>

没了XD 本日结束(#
没啦，再为大家示范几个例子，感受一下能够直接在 HTML 写 Flex 语法的快感~~~
例如我想让 2-1, 2-2, 2-3 区块平均分配排好，(且置左置右)
要如何做？

其实就是把 class 从 justify-content-center 改成 justify-content-between 就好XD

<div class="mb-1 p-1 bg-primary">1</div>
<div class="mb-1 p-1 py-2 bg-info d-flex justify-content-between">
  <div class="bg-white mx-1 p-2">2-1</div>
  <div class="bg-white mx-1 p-2">2-2</div>
  <div class="bg-white mx-1 p-2">2-3</div>
</div>
<div class="mb-1 p-1 bg-warning">3</div>

像这样：

水平置中的介绍完，来讲一下垂直置中，
如果现在让中间的 2-2 区块再多长一块出来像这样：

<div class="mb-1 p-1 bg-primary">1</div>
<div class="mb-1 p-1 py-2 bg-info d-flex justify-content-between">
  <div class="bg-white mx-1 p-2">2-1</div>
  <div>
    <div class="bg-white mx-1 p-2">2-2</div>
    <div class="bg-white m-1 p-2">2-2</div>
  </div>
  
  <div class="bg-white mx-1 p-2">2-3</div>
</div>
<div class="mb-1 p-1 bg-warning">3</div>

可是你并不想要让 2-1, 2-3 高度变高，
而是让它们跟原本一样高，
而且要垂直置中该怎麽做？

其实就是在 class 加上 align-items-center 就好，
像这样：

<div class="mb-1 p-1 bg-primary">1</div>
<div class="mb-1 p-1 py-2 bg-info d-flex justify-content-between align-items-center">
  <div class="bg-white mx-1 p-2">2-1</div>
  <div>
    <div class="bg-white mx-1 p-2">2-2</div>
    <div class="bg-white m-1 p-2">2-2</div>
  </div>
  
  <div class="bg-white mx-1 p-2">2-3</div>
</div>
<div class="mb-1 p-1 bg-warning">3</div>

所以之後如果只有要进行 Flex 设定，
没有其他额外的 CSS 语法，
就可以直接用 Bootstrap 提供的 Flex class 语法试试看哦！

这边一样附上今日 CodePen：
Day5 - 传统版
Day5 - Bootstrap 版
大家可以跟着练习看看哦~

後记

然後你可能会担心 Flex 语法不算短，
好难记哦，
这不用担心哦，
你只要记得 Flex 排版观念，
然後忘记的时候到 Bootstrap 页面查询就可以了~
Flex - Bootstrap
(就是当字典查就好XD 不需硬背)

我到现在还是很常查XD
因为真的太长了，
尤其是那个 justify-content-? 系列orz
其实有时候也不是记不起来，
是太长懒得打XD"
所以我也把 Flex 语法放在我的笔记里面XD

明天预计进入本系列文第一个重头戏：Grid，
也是我之前一开始完全没接触过的东西XD
那就让我们明天见啦！

(PS1. 其实除了铁人赛，从今天开始我还有另外一个连续 30 天挑战orz
但另外一个挑战看起来不太妙啊~~~~~orz)
(PS2. 是说今天第五天了，我去年队友还没发现我今年偷偷报名的事XD)