[Day11] 排版的小孩子才做选择 ～ Grid 跟 Flex 我全都要！

本日文章没有前言XD
但没有前言真的有点怪怪的，总之本日文章想要分享过去我在使用 Grid 跟 Flex 的心得分享~

本日正文

Grid 排版在排需要对齐的版面时非常好用，
(就像 table 排起来的样子)
例如：

<Row xs="2">
    <Col>
      A君
    </Col>
    <Col>
      今日课表：国英数
    </Col>
    <Col>
      B君
    </Col>
    <Col>
      今日课表：国自社
    </Col>
</Row>

而且某种层面来说又比 table 又更加有弹性，
所以在排这种类 table 式的排版我个人满喜欢用 Grid 去排的。
(或当然回归 Grid 最重要的 breakpoint，RWD 才是它的强项XD
要设定每个装置宽度下要有不同的宽度，用 Grid 当然是首选XD)

不过如果是要排别的版面，
用 Grid 我自己过去在用的时候有遇到一些问题，
例如现在的版面有两栏，
里面各放一张图片，
会长这样：

<Row className="mt-4">
    <Col>
      <img src="https://img.favpng.com/14/22/5/emoticon-emoji-icon-png-favpng-zYKN8GfdCBeaN1rxYybZWBGuh.jpg" width="100" alt="emoji" />
    </Col>
    <Col>
      <img src="https://img.favpng.com/14/22/5/emoticon-emoji-icon-png-favpng-zYKN8GfdCBeaN1rxYybZWBGuh.jpg" width="100" alt="emoji" />
    </Col>
</Row>

我们应该会想要这两栏是靠在一起的，
为什麽它会这样分开？
在 class 加个 border 来看看：

<Row className="mt-4">
    <Col className="border">
      <img src="https://img.favpng.com/14/22/5/emoticon-emoji-icon-png-favpng-zYKN8GfdCBeaN1rxYybZWBGuh.jpg" width="100" alt="emoji" />
    </Col>
    <Col className="border">
      <img src="https://img.favpng.com/14/22/5/emoticon-emoji-icon-png-favpng-zYKN8GfdCBeaN1rxYybZWBGuh.jpg" width="100" alt="emoji" />
    </Col>
</Row>

因为栏位的宽度被事先分配好了，
各占 6 个格子，
并不会依据格子里的内容而有所变动。
(PS. 有时候在解排版 issue 时，我个人满常加 border 来看看发生什麽事)

有时候这样的版面其实被要求内容只要水平置中就可，
所以我们就可以在 Col 里面加上 Flex 的语法，
像这样：

<Row className="mt-4">
    <Col className="border d-flex justify-content-center">
      <img src="https://img.favpng.com/14/22/5/emoticon-emoji-icon-png-favpng-zYKN8GfdCBeaN1rxYybZWBGuh.jpg" width="100" alt="emoji" />
    </Col>
    <Col className="border d-flex justify-content-center">
      <img src="https://img.favpng.com/14/22/5/emoticon-emoji-icon-png-favpng-zYKN8GfdCBeaN1rxYybZWBGuh.jpg" width="100" alt="emoji" />
    </Col>
</Row>

但有时候你想要的是希望每一栏可以自适应大小，
然後可以紧连着排列，
不希望事先被分配固定宽度，
这种情况我就不会用 Grid，
用 <div> 搭配 Flex 的方式，
像这样：

<div className="mt-4 d-flex border">
    <div className="mx-1 border">
      <img src="https://img.favpng.com/14/22/5/emoticon-emoji-icon-png-favpng-zYKN8GfdCBeaN1rxYybZWBGuh.jpg" width="100" alt="emoji" />
    </div>
    <div className="mx-1 border">
      <img src="https://img.favpng.com/14/22/5/emoticon-emoji-icon-png-favpng-zYKN8GfdCBeaN1rxYybZWBGuh.jpg" width="100" alt="emoji" />
    </div>
</div>

两个 <div> 中间顶多用 mx 去做一点 Spacing 的留白就好。

这种情况只用 Flex 也是满自由的，
如果这时候我想要让这两个 <div> 排在最左最右，
我只要在 Row 的 class 加上 justify-content-between 就好，
像这样：

<div className="mt-4 border d-flex justify-content-between">
    <div className="mx-1 border">
      <img src="https://img.favpng.com/14/22/5/emoticon-emoji-icon-png-favpng-zYKN8GfdCBeaN1rxYybZWBGuh.jpg" width="100" alt="emoji" />
    </div>
    <div className="mx-1 border">
      <img src="https://img.favpng.com/14/22/5/emoticon-emoji-icon-png-favpng-zYKN8GfdCBeaN1rxYybZWBGuh.jpg" width="100" alt="emoji" />
    </div>
</div>

如果这时候我想要让这两个 <div> 水平置中，
当然是只要在 Row 的 class 改成 justify-content-center 就好，
像这样：

<div className="mt-4 border d-flex justify-content-center">
    ...
    ... (略)
</div>

所以就端看这时候你的排版是需要固定宽度(位置)或者要让它自适应大小紧连排列，
来决定你的架构要用 Flex 或 Grid。
(而通常用 Grid 一定会搭配 Flex 做使用)

会特别想要写这篇是因为我之前刚在学 Grid 时，
老是觉得 Grid 很好我应该一直用 Grid 来做排版，
但发现这样有时候达不成设计师在版面上的要求，
所以有点吃到苦头，
後来发现其实我应该用版面的特性去思考这时候要用哪一种进行排版才对。

附上今日 CodeSandbox：Day11 - Reactstrap

预计明天会介绍排版时很常用到的 Component - Navbar，
那我们就明天再见啦！

後记

真的一直都觉得参加铁人赛的大家都卧虎藏龙，
可以看到很多前辈、大大不同的人生故事，
很棒很有趣呢！
能参加铁人赛真是太好了~~~~~~~

虽然我到现在还是一直担心是不是能写完，

但很多事如果因为担心就不敢往前踏出一步，
那就会一直停留在原地，
当犹豫而踌躇不前时，
就试着推自己一把吧！
当踏出第一步，
你自然而然就会知道後面的路该怎麽走了！

(......真的吗？)
(希望我可以走到完赛那天回来验证这段话XD)