iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
自我挑戰組

大二萌新的學習紀錄系列 第 5

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前長這樣:
https://ithelp.ithome.com.tw/upload/images/20210919/20141088VIgA4VXPTC.png

我現在在css裡設置display:flex
(注意:是設置在container喔!因為display是外容器(container)屬性,設置在裡面的box是沒用的,因為它們都是內元件(item)屬性)

.flex_container {
    display:flex;
}

結果如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20210919/20141088phP12WwcTX.png


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;
}

結果如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20210919/20141088K8Cq5GhLUY.png
https://ithelp.ithome.com.tw/upload/images/20210919/20141088bScQka0rxd.png
https://ithelp.ithome.com.tw/upload/images/20210919/20141088k32Qr1uOS9.png


3.flex-direction
Flex有分「主軸(row)」和「交錯軸(column)」,你也可以把它想成矩陣的形式
https://ithelp.ithome.com.tw/upload/images/20210919/20141088NxY9aQS1TW.png

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;
}

結果如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20210919/20141088cnFxNfURxR.png
https://ithelp.ithome.com.tw/upload/images/20210919/20141088LETjABmh47.png
https://ithelp.ithome.com.tw/upload/images/20210919/20141088jqG4bQbRzi.png
https://ithelp.ithome.com.tw/upload/images/20210919/20141088F7XpI5fRwk.png


4.flex-flow
flex-flow是flex-directionflex-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;
}

結果如下圖所示:

從主軸的「起點」開始排
https://ithelp.ithome.com.tw/upload/images/20210919/20141088Yw9aoRofWk.png

從主軸的「終點」開始排
https://ithelp.ithome.com.tw/upload/images/20210919/20141088nntkIDUEw9.png

排在「起點」和「終點」的中間
https://ithelp.ithome.com.tw/upload/images/20210919/20141088qcTfPSPTuR.png

Space-between是平均分配「元素」位置,但左右兩側會貼齊主軸的起點、終點
https://ithelp.ithome.com.tw/upload/images/20210919/20141088KiQi3YQjsw.png

這裡想把space-aroundspace-evenly拿來一起講
因為常常會有人分不清楚這兩者的差異

Space-around是平均分配「元素」位置,但左右兩側的間距會較小
Space-evenly是「元素」和「左右兩側」的間距皆相同
https://ithelp.ithome.com.tw/upload/images/20210919/201410881mexMQuYM8.png
https://ithelp.ithome.com.tw/upload/images/20210919/201410881aCZC05UR2.png


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,則不會起作用
https://ithelp.ithome.com.tw/upload/images/20210919/20141088fmvY7xdFBq.png

從交錯軸的「起點」開始排
https://ithelp.ithome.com.tw/upload/images/20210919/20141088nU9fRdzsac.png

從交錯軸的「終點」開始排
https://ithelp.ithome.com.tw/upload/images/20210919/20141088kPSZMSViYp.png

這邊想把center和baseline拿來一起講
因為這兩個真的長的超像超像世界無敵像 (認真)
但還是有些微差異在

請看center的圖,上面有兩條紫色的線,它們都剛好對齊在數字的中間
再看baseline的圖,你會發現紫色的線在數字的下方
沒錯!差異就在這裡
不管字體大小,baseline都是以「字體下方」去做對齊
https://ithelp.ithome.com.tw/upload/images/20210919/201410887xsubtEhd1.png
https://ithelp.ithome.com.tw/upload/images/20210919/20141088jadGaNd8HA.png


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的預設值,每行將拉伸以填滿剩餘空間
https://ithelp.ithome.com.tw/upload/images/20210919/201410884JE4c4Url3.png

從交錯軸的「起點」開始排
https://ithelp.ithome.com.tw/upload/images/20210919/20141088O18HAigXEv.png

從交錯軸的「終點」開始排
https://ithelp.ithome.com.tw/upload/images/20210919/201410882kmgPJhRJg.png

排在「起點」和「終點」的中間
https://ithelp.ithome.com.tw/upload/images/20210919/20141088wUvLqvrqJq.png

Space-around是平均分配「行」的位置,但左右兩側的間距會較小
https://ithelp.ithome.com.tw/upload/images/20210919/20141088PitQbKqVk2.png

Space-between是平均分配「行」的位置,但上下兩側會貼齊交錯軸的起點、終點
https://ithelp.ithome.com.tw/upload/images/20210919/20141088LWAN9vUgaM.png

Space-evenly是「元素」和「上下兩側」的間距皆相同
https://ithelp.ithome.com.tw/upload/images/20210919/20141088UsYMZZPIXo.png


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上)

.box_short {
    align-self:stretch;
}

結果如下圖所示:

Stretch是預設值,box_short會往交錯軸方向將內元素全部填滿
如果你有設置height,則不會起作用
https://ithelp.ithome.com.tw/upload/images/20210919/2014108844Srby2vhf.png

box_short會從交錯軸的「起點」開始排
https://ithelp.ithome.com.tw/upload/images/20210919/20141088zesXboWjuH.png

box_short會從交錯軸的「終點」開始排
https://ithelp.ithome.com.tw/upload/images/20210919/20141088p8TrXl86NB.png

box_short會排在「起點」和「終點」的中間
https://ithelp.ithome.com.tw/upload/images/20210919/20141088XpJza7cb55.png

box_short會排在「字體下方」
https://ithelp.ithome.com.tw/upload/images/20210919/20141088bKGsdKDVk4.png


9.order
order預設值為0,它可以重新定義內元件的排列順序,順序會依照數值的大小排列

讓我們看以下範例

CSS:

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

結果如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20210919/201410885lMSIZFZG3.png

CSS:

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

結果如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20210919/201410889P3LIDSJt0.png


10.Flex (flex-grow、flex-shrink、flex-basis)
這裡想和大家聊聊Flex的空間分配
Flex是flex-growflex-shinkflex-basis的縮寫
那它們到底是什麼呢?別急!我立馬說給你聽

但首先,請先去HTML把4~10的box都刪掉
並把container的height改成220px,並加上width:1800px

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

結果如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20210919/20141088OKiAPRNhja.png

好,事不宜遲,趕緊向各位介紹這三種屬性


Flex-grow
Flex-grow預設值為0,它會依照你設定的值去分配剩餘空間

我們現在在box_short設置flex-grow:1,等於把剩餘空間分成「1等分」給box_short
https://ithelp.ithome.com.tw/upload/images/20210919/20141088D66V7B1SdB.png

再把box_normal設置flex-grow:2,就等於把剩餘空間分成「3等分」,再分別分給3個box
https://ithelp.ithome.com.tw/upload/images/20210919/201410881qNFVmdqeg.png


Flex-shrink
Flex-shrink是當空間不夠時,所壓縮的比例,預設值為1,代表大家所壓縮的比例一樣

我們現在先把三個box都設置flex-shrink:0,代表三個box都不被壓縮,它就會直接爆出container外面
https://ithelp.ithome.com.tw/upload/images/20210919/20141088cVJxkF7D2Y.png

再試試只把flex-shrink:0設置在box_normal,這樣就會只壓縮box_short
https://ithelp.ithome.com.tw/upload/images/20210919/20141088caalkifYyQ.png

至於壓縮的多寡,是根據不同box的寬度去分配,請看以下範例
https://ithelp.ithome.com.tw/upload/images/20210919/201410886NSPIcVsfq.png


Flex-basis
Flex-basis和width本質上一樣,但優先順序較width高,預設值為auto

如果我們同時在box_short設置Flex-basis:50pxwidth: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


上一篇
Day 4 : HTML – 別動!你就停在那裡!CSS position定位屬性是什麼?
下一篇
Day 6 : HTML - 網頁排版超強神器part_2,CSS grid到底是什麼?
系列文
大二萌新的學習紀錄30

尚未有邦友留言

立即登入留言