---
# System prepended metadata

title: 切版
tags: [網頁設計]

---

# 切版

### >>先用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 ;  *以文字對齊

## 