css3彈性盒（flexiblebox或flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。
justify-content控制伸縮盒子在主軸上的對齊方式 取值：
flex-start
預設值。專案位於容器的開頭。
flex-end
專案位於容器的結尾。
center
專案位於容器的中心。
space-between
填充空白自適應在主軸中心顯示，但是首尾兩個元素距離容器沒有空白。
space-around
填充空白自適應在主軸中心顯示，專案位於各行之前、之間、之後都留有空白的容器內。
align-items控制伸縮盒子在交叉軸的對齊方式 取值：
stretch
預設值。元素被拉伸以適應容器。 如果指定側軸大小的屬性值為'auto'，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。將盒子在交叉軸上進行拉伸，直至適應整個伸縮盒子容器
center
元素位於容器的中心。 彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
flex-start
元素位於容器的開頭。 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end
元素位於容器的結尾。 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
baseline
元素位於容器的基線上。 如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
align-content多軸排列在交叉軸對齊方式 取值
取值：flex-start、flex-end、center、stretch【預設】、space-around、space-between
列布局（主軸是x軸，交叉軸是y軸）放在一行中
flex-direction: row;預設值，一行內去放，結果：列布局
flex-wrap: nowrap;預設值，不換行，進行伸縮
flex-wrap: wrap;自動換行
flex-wrap: wrap-reverse;自動換行，並且顛倒順序:倒序輸出
行布局 放在一列中
flex-direction: column;放在一列中，結果：行布局
對flex指定所佔的份數，子元素相對于父元素所佔的比例，flex：1；
flex：2 200px;在200px的基礎上加上份數比例，兩份。
flex-grow
乙個數字，規定專案將相對於其他靈活的專案進行擴充套件的量。
flex-shrink
乙個數字，規定專案將相對於其他靈活的專案進行收縮的量。
flex-basis
專案的長度。合法值："auto"、"inherit" 或乙個後跟 "%"、"px"、"em" 或任何其他長度單位的數字。
css的布局方式（浮動布局，定位布局，伸縮盒）
布局 使用塊元素搭建網頁結構,改變預設文件流的方式，讓其在一行中顯示多列。讓塊在一行中顯示 浮動布局 float 為了讓塊元素在一行顯示 float left 向左浮動 right 向右浮動 可以使塊元素脫離當前的文件流 1 寬度如果沒有手動指定那麼就由內容決定 2 多個浮動元素在乙個浮動流中併排顯...
CSS3 flex 伸縮布局盒模型
css3引入一種新的布局模式 flexbox布局 1.優點 flexbox布局在定義伸縮專案大小時伸縮容器會預留一些可用空間，可以調節伸縮專案的相對大小和位置。非常適用於排列方向改變，縮放與收縮用的比較多的專案。2.基本概念 由於flexbox並不只是個屬性，而是乙個模組，會有好多屬性，以及重要的名...
布局 Flex伸縮布局
flex是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。採用flex布局的元素，稱為flex容器，簡稱 容器 它的所有子元素自動成為容器成員，成為flex專案，簡稱 專案 總結 通過給父盒子新增flex屬性，來控制子盒子的位...