flexbox 布局(flexible box)意在提供乙個更為有效的方式來進行布局、對齊和分配乙個容器內元素之間的空間，即使他們的大小是未知的或者動態的。
flex布局的主要思想是，讓容器能夠改變它的子元素的寬度/高度（甚至順序），從而更好地填充可用的空間（主要是為了適應所有種類的裝置和螢幕大小）。
最重要的，flexbox 布局是可以改變方向的。與之相對的是傳統布局（block是垂直方向的從上到下，inline是水平方向的從左到右）。雖然他們在頁面上表現良好，但是他們缺乏彈性（字面意義上的缺乏彈性）來適應大型的或者複雜的應用（尤其是遇到方向的改變、調整大小、伸展、收縮等等這些情況時）。
採用flex布局的元素，稱為flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱"專案"。
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross
start，結束位置叫做cross end。專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
html
body
.box
.box1
.box2
flex布局在各瀏覽器下的相容性
參考二:
相容性
css布局之彈性布局flex
作用 彈性布局flex能按照我們的設定自動計算各子元素之間的間距並將之布局好，而不需要像定位那樣手動計算布局。彈性布局是定義在乙個父容器中，加上display flex樣式使父容器的布局方式成為彈性布局。父容器中的子元素都會成為行內塊，預設所有子元素橫向排列，子元素的float clear和vert...
CSS之Flex彈性布局
flex彈性布局實現水平垂直居中 父盒子display flex 子盒子margin auto 概念 採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 父容器 displa...
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...