# flex ## 基本概念 采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。  容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。 Flex項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。 Flex屬性分為兩部分，一部分作用于容器稱容器屬性，另一部分作用于項目稱為項目屬性。 ## Flex容器屬性 ### flex容器定義 ~~~ .box { display: flex; /* 或者 inline-flex */ } ~~~ 定義了一個flex容器，根據設值的不同可以是塊狀容器或內聯容器。這使得直接子結點擁有了一個flex上下文。 參考資料 [【基礎知識】Flex-彈性布局原來如此簡單！！](https://juejin.im/post/5ac2329b6fb9a028bf057caf)