網頁布局（layout）是 CSS 的一個重點應用。 布局的傳統解決方案，基于盒狀模型，依賴`display`屬性 + `position`屬性 + `float`屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。 2009年，W3C 提出了一種新的方案——Flex 布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。  ## 一、Flex 布局是什么？ Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。 彈性盒子是 CSS3 的一種新的布局模式，是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。 任何一個容器都可以指定為 Flex 布局。 ~~~html <div class="box"> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> <div class="box-item">4</div> </div> ~~~ ~~~css .box { display: flex; background-color: white; } .box-item { width: 200px; height: 200px; line-height: 200px; vertical-align: middle; margin: 5px; background-color: #ffd200; font-size: 100px; color: white; text-align: center; } ~~~ 行內元素也可以使用 Flex 布局。 ~~~css .box { display: inline-flex; } ~~~ Webkit 內核的瀏覽器，必須加上`-webkit`前綴。 ~~~css .box { display: -webkit-flex; /* Chrome, Safari */ display: flex; } ~~~ > 注意，設為 Flex 布局以后，子元素的`float`、`clear`和`vertical-align`屬性將失效。 ## 二、基本概念 采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。 > 注意：彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。  容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做`main start`，結束位置叫做`main end`；交叉軸的開始位置叫做`cross start`，結束位置叫做`cross end`。 項目默認沿主軸排列。單個項目占據的主軸空間叫做`main size`，占據的交叉軸空間叫做`cross size`。