# 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`: 單個項目占據的交叉軸空間