[Day5] 學 Bootstrap 是為了走更長遠的路～ Flex 篇

2021 iThome 鐵人賽

DAY 5

自我挑戰組

Re: 從 Next.js 開始的 React 生活系列第 5 篇

13th鐵人賽

Ado Lin

2021-09-07 20:53:24

1616 瀏覽

分享至

前言

這幾天寫下來，
真的深深感受到我參加的是「自我挑戰組」，
真的每天都在 自我挑戰 跟天窗奮鬥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>