CSS-CSS Flex
我排版時最常用也最愛的 css 語法就是 flex（直接忘記float是誰？），這裡整理六角上課中老師介紹的 flex 屬性，以及後來再上網查找的筆記。
切版經常使用 div，但一般情況下 div 這種區塊元素排列會像是下圖：
而如果要讓 div 像是下圖一樣，排列在同一行的話就要使用到 flex 語法。
請記得內元件要有 flex 排列效果，是要在 ”外容器” 上面下 display : flex。
<div class="container d-flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>上面是 HTML，下面是它的css
.container {
background-color: #50a0ff;
padding: 20px;
}
.item {
width: 100px;
margin: 10px;padding: 10px;
background-color: #fff;
}
.d-flex{
display: flex;
}所以下了 display : flex 就天下無敵❤️了嗎？
不是 yo～
還需要學習很多不同的 flex 語法呢😩！
首先 flex 語法分成兩大類，1.外容器、2.內元件。
先來看外容器的語法：
flex-direction
flex-direction：決定 flex 的軸線方向，用比較簡單的來說就是「單行排列方向」，預設是橫的，可能因為一般就是想把區塊元素轉成橫向才用的嘛。、
.flex-container {
flex-direction: row | row-reverse | column | column-reverse;
}在上面可以看到，多了一個 reverse 出來對吧？
是因為如果遇到想要反向排列（由後往前）的，像是時間軸最新的放最前面，就可以直接使用 row-reverse 拉～
flex-wrap
這是用於如果內元件排列後，超過外容器主軸時，可以換行。舉例來說，下圖內元件很明顯第五個是放不進去第一排的，如果硬要放，那勢必會縮短，這時候控制是否要換行就是用 flex-wrap 。
.flex-container {
flex-wrap: nowrap | wrap | wrap-reverse;
}就讓我們來看看 flex-wrap : nowrap 的效果吧!
至於 flex-wrap : wrap-reverse ，我個人比較少用。但他搭配 flex-direction 方向的不同就會產生出不同排列方式，可能要自己 try try 看😅😅。
可以記一下 emmet 是 fxww 、fwwnw。
Justify-content
這是最常用的屬性之一拉～所以 emmet 請一定要記住。
.flex-container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}總共有五種可以選擇：
- 從前排列：flex-start，emmet 是 jcfs 。
- 從後排列：flex-end，emmet 是 jce 。
- 置中排列：center，emmet 是 jcc 。
- 抵住兩端分散排列：space-between，emmet 是 jcsb 。
- 平均分散排列：space-around，emmet 是 jcsa 。
align-items
跟上面的 justify-content 很像，差別是 justify-content 是決定主軸，而align-items是決定交錯軸。
.flex-container {
align-items: flex-start | flex-end | center | baseline | stretch;
}一樣也總共有五種可以選擇：
- 從前排列：flex-start，emmet 是 ais 。
- 從後排列：flex-end，emmet 是 aie 。
- 置中排列：center，emmet 是 aic 。
- 自動填滿：stretch，emmet 是 aisc 。預設就是 sketch 了！！
- 根據文字排列：baseline，emmet 是 aib 。
align-content
align-content，我自己比較少用，但是也是常用屬性。跟align-items差別是它是多行的排列方式。來看看下圖就很明顯了！
.flex-container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}我覺得可能比較實用的是 align-content : center 、align-content : space-between
內元件
內元件的設定反而比外容器難理解唷，尤其是 flex-grow、flex-shrink、flex-basis。
難懂三劍客：
flex-grow：元件的伸展性，是一個數值，當空間分配還有剩餘時的當前元件的伸展性，預設值為 0，如果設置為 0 則不會縮放。
flex-shrink：元件的收縮性: 元件的伸展性，是一個數值，當空間分配還不足時的當前元件的收縮性，預設值為 0，如果設置為 0 則不會縮放。
flex-basis：元件的基準值，可使用不同的單位值。
我們用案例來解說，首先難懂三劍客中的稍微好懂大哥 flex-grow，假設我們一個 container 中包了三個 item，照理來說他就會長得跟下圖一樣，不會填滿 container。
<div class="container d-flex">
<div class="item item1">內元件1</div>
<div class="item item2">內元件2</div>
<div class="item item3">內元件3</div>
</div>上面是 HTML，下面是它的css
.container {
width: 100%;
}
.item {
width: 100px;
}但是當我們在item1 補上flex-grow，內元件1 就會瞬間漲滿整個外容器。
.item1{
flex-grow : 1;
}我們再嘗試在 item2 上補 flex-grow，讓他也長大吧～
.item2{
flex-grow : 2;
}咦？內元件2比內元件1還大？這是為啥？
這個算法應該是外容器剩餘空間按照 flex-grow 的數值比例去分配，而按照上面案例應該是1+2=3，所以剩餘空間要先分成三份，再去分配數量：
內元件1：佔據剩餘空間 1/3
內元件2：佔據剩餘空間 2/3
flex-shrink
與 flex-grow 完全相反，flex-grow 是長大，flex-shrink 是縮小！內元件相加總和超過外容器的數值，去按照比例減少，是不是很饒舌？我們來看案例：
下面的3個 item，因為總和900px大於外容器600px寬，所以預設是會自動縮小的，但是如果我們想控制縮小對象與數值才會使用flex-shrink
.container {
width: 600px;
}
.item {
width: 300px;
}
.item1{
flex-shrink: 3;
}
.item2{
flex-shrink: 2;
}
.item3{
flex-shrink: 1;
}- item1：300-[(900–600)/6*3]=150
- item2：300-[(900–600)/6*2]=200
- item3：300-[(900–600)/6*1]=250
flex-basis
這個屬性我用的次數真的很低，其實有點不了解，希望之後再慢慢補充，大概是可以說 flex-basis 預設值爲 auto，表示其預設分配到的空間，與 width 很像，但優先程度比較 width 高。
用下面的 code 做舉例：
.container {
width: 1200px;
}
.item1{
flex-basis: 300px;
}
.item {
width: 200px;
}可以看到 item1的 flex-basis : 300px蓋掉 item的200px寬了
align-self
這個屬性簡單來說就是單獨控制排列序列中，某個元件的排列方式，如下圖，內元件1自己特別排列在 start 的位置，基本上 align-self 跟 align-items 語法也是差不多。
order
如果有時候想調整排列序列中的順序，使用 order 就對了，預設數字是0，所以如果只是把其中一個拉到前面就可以直接打 -1，就可以有下圖的效果。
.item2{
order:-1;
}當然也可以自由排列，達到下圖效果：
.item1{
order:4;
}
.item2{
order:1;
}
.item3{
order:3;
}
.item4{
order:2;
}未來持續補充
