## 一、Flex布局是什么？ Flex是Flexible Box的縮寫，是彈性布局的意思，用來為盒模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。 .box{ display:flex; } 行內元素也可以使用Flex布局。 .box{ display:inline-flex; } 注意： 1.設為Flex布局以后，子元素的float、clear和vertical-align都將失效。 2.暫時沒有考慮瀏覽器前綴，后續我們通過工具自動添加前綴。 ## 二、Flex解析 使用Flex布局的元素，我們可以稱其為Flex容器(Flex Container),簡稱容器。它所有的子元素自動成為容器成員，我們稱其為Flex項目(Flex item),簡稱項目。  可以看到上圖中，容器的主要部分分為兩根軸：水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置與邊框的交叉點叫做main start，結束位置叫做main end； 交叉軸的開始位置叫做cross start，結束位置叫做cross end。 項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。