#

## Flexbox Guide

### flex-direction
* row
* column
* row-reverse
* column-reverse

### justify-content & align-items
> 這個設定並不是直接代表左右的設定，而是針對排列的主軸線作為調整的關鍵；align-items 則相反。

除了不同方向的對齊外，其中比較關鍵的是他一樣能夠設定 space 如何排列。
* flex-start｜表示從該軸線的開頭排列。
* flex-end｜表示從該軸線的尾端排列。
* center｜排列到中間。
* space-around｜每個物件左右的空間都一樣多
* space-between｜左右無空格，中間的空白一樣多
* space-evenly｜左右有空格，所有的空白一樣多

### flex-shrink & flex-grow
> 其核心概念，便是當縮小／放大到 flex 指定的大小後，便不會再改變了。

----
## Pug & Sass Pre-CSS 技巧
* PUG：HTML 預處理語言
* SASS：CSS 預處理語言

### PUG
> 核心概念便是只留下必要的關鍵字，剩下的用空白代替。

HTML Format:
<h2>Title</h2>
<h2 class="title red">Title</h2>

PUG Format:
h2 Title
h2.title.red Title

如果 div 裡面還有其他元素，則透過**縮排**來達成。

h2.title.red
    span.smallText 小文字

#### Example:

ul

縮排的時候，如果用 & 可以代換外面那層的 Class：

.title
    .smallText
        &:hover
            color: red

## CSS 技巧

h2::after
    content: ""
    display: block

一定要加上 content 跟 display，因為::after 預設是沒有形體的，因此需要加上設定讓他顯現。