# Flex 基本概念
[TOC]
## 基本術語
- Flex 容器(flex container):
- 采用`flex`布局的元素, 稱為`flex容器`, 簡稱**容器**
- Flex 項目(flex item):
- Flex 容器中的所有成員(子元素)會自動成為該容器的成員,稱為`flex項目`,簡稱**項目**
- _flex 項目都支持寬高設置, 哪怕它之前是內聯元素,類似于浮動元素_
```html
<style>
/*flex容器*/
.contaier {
display: flex;
}
/*flex項目*/
.item {
...;
}
</style>
...
<div class="container">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
```
- 主軸(main axis):
- 也叫水平軸, 橫軸,x 軸
- `main start`: 起始位置
- `main end`: 結束位置
- `main size`: 單個項目占據的主軸空間
- 交叉軸(cross axis):
- 也叫垂直軸,堅軸,y 軸
- `cross start`: 起始位置
- `cross end`: 結束位置
- `cross size`: 單個項目占據的交叉軸空間

- 教學大綱
- HTML5基礎
- 1-html基礎知識
- 2-語義化結構元素
- 3-語義化文本元素
- 4-鏈接/列表/圖像元素
- 5-表格元素
- 6-表單與控件元素[重點]
- CSS3基礎
- 1-css與html文檔
- 2-css選擇器
- 3-細說盒模型
- Flex布局[精簡版]
- 1-Flex概論
- 2-Flex布局是什么
- 3-Flex基本概念
- 4-Flex容器屬性
- 5-Flex項目屬性
- Flex布局[細說版]
- 1-flex 布局概述
- 2-flex 容器與項目
- 3-flex 容器主軸方向
- 4-flex 容器主軸項目換行
- 5-flex 容器主軸與項目換行簡寫
- 6-flex 容器主軸項目對齊
- 7-flex 容器交叉軸項目對齊
- 8-flex 多行容器交叉軸項目對齊
- 9-flex 項目主軸排列順序
- 10-flex 項目交叉軸單獨對齊
- 11-flex 項目放大因子
- 12-flex 項目收縮因子
- 13-flex 項目計算尺寸
- 14-flex 項目縮放的簡寫
- Flex布局[案例版]
- 1-調整項目順序
- Grid布局[精簡版]
- 1. 常用術語
- 2. 容器屬性
- 3. 項目屬性
- 4. 布局實例
- 1. 經典三列布局
- 2. 媒體查詢
- Grid布局[細說版]
- 1-必知術語
- 2-容器創建與行列劃分
- 3-單元格常用單位
- 4-項目填充到單元格
- 5-項目填充到網格區域
- 6-對齊容器中的所有項目
- 7-對齊單元格中所有項目
- 8-對齊單元格中某個項目
- 9-容器中行與列之間的間距