# 切版

### >>先用Excalidraw畫整體結構

#### 利用 `<div></div>`切版

## Flex用法(常用ㄉ)
記得先設置 <span style=background-color:#FFDAC8>display:flex; </span> > 會先變成並排

1. <span style=background-color:#FFDAC8>flex-wrap: ; </span> <span style=color:red>*換行 </span>
屬性：nowrap(預設)、wrap、wrap-reverse

2. flex-direction: ; <span style=color:red>*排列方向</span>
屬性：row(預設)、row-reserve (左右)
column、column-reserve (上下)

3. <span style=background-color:#FFDAC8>justify-content </span> <span style=color:red> *水平對齊</span>
justify-content: flex-start | flex-end | center; 排列起始位置
justify-content: space-between | space-around | space-evenly; 排列

4. align-item <span style=color:red>*垂直對齊</span>
align-items:stretch; *測試時勿設置height
align-items:flex-start | flex-end ; *對齊上方/下方
<span style=background-color:#FFDAC8>align-items:center</span> | baseline ; *以文字對齊

##