# 排版
## RWD響應式斷點

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

## Containers

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
<div class="container-fluid"> ...</div>

## Grid
預設為平均分配欄寬，可以添加樣式來設定
例如我設定為讓第一個 div 預設佔 12 格，也就是全版；
寬度 576px 以上時，佔 4 格，也就是 1/3 寬。

//套用前
<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

//套用後
<div class="container text-center">
  <div class="row">
    <div class="col-12 col-sm-4">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col ">
      Column
    </div>
  </div>
</div>

## Flex

### 垂直對齊
align-items：//當交錯軸只有一行時的對齊方式
* flex-start 對齊交錯軸線最前端
* flex-end 對齊交錯軸線最末端
* center 對齊交錯軸線中央
* stretch 內容元素撐開至 flexbox 大小
* baseline 對齊內容物的基線

align-content：交錯軸為多行時的的整體對齊方式,只能適用在多行的 Flex 容器當中，在預設的容器設定中使屬於單行 Flex 容器，套用這個樣式是無效的設定。
* flex-start 每行貼齊交錯軸線最前端
* flex-end 每行貼齊交錯軸線最末端
* center 每行對齊交錯軸線中間
* stretch 每行內容元素全部撐開至 flexbox 大小
* space-around 每行平均分配每行間距
* space-between 第一行與最後一行分別對齊交錯軸線最前端與最末端

### 水平置中

justify-content:
* flex-start 對齊主軸線最前端
* flex-end 對齊主軸線最終端
* center 對齊主軸線中央
* space-around 平均分配寬度和間距
* space-between 平均分配寬度，第一項和最後一項貼齊邊緣