flexbox彈性盒模型
給父級新增flex
display: flex;
換行 flex-wrap: wrap;
flex-direction: ; 元素主軸的方向，預設值row，從左到右
row-reverse 從右到左
column從上到下
column-reverse 從下到上
flex-direction:column-reverse
主軸方向對齊方式 justify-content: space-around;
交叉軸對齊方式 align-items: flex-start;
換行之後交叉軸方向排布；預設值stretch，剩下的區域會被等分
align-content: center;
等比例計算，等比例縮放
彈性增長因子 值越大增長得越大
flex-grow: ;
值越大縮的越多
雖然值是數字，但是要盡量避免去使用數字設定 ，因為瀏覽器要進行計算
auto: 計算值為 1 1 auto
initial: 計算值為 0 1 auto
none：計算值為 0 0 auto
inherit：從父元素繼承
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選
flex: flex-grow flex-shrink flex-basis;
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
12
34
auto：如果』align-self』的值為』auto』，則其計算值為元素的父元素的』align-items』值，如果其沒有父元素，則計算值為』stretch』。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與』flex-start』等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值為』auto』，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照』min/max-width/height』屬性的限制。
彈性盒模型flexbox布局例項
我認為當flexbox支援所有的瀏覽器時，由於它比浮動布局更加的簡單和強大性，它將徹底的改變我們的css 布局方式。例如我們可以很容易的寫出乙個元素在未知比例下的居中對齊布局。當然css3 新增的其它屬性，例如grid也可以給前端開發 帶來更多的布局方式。下面給出一些例子來證明為什麼web 開發者應...
css3彈性盒模型flexbox
設定給父元素盒子，將乙個元素設定成彈性盒子 決定顯示的方向 即專案的排列方向 1.row 預設值，左對齊，順序顯示 2.row reverse 右對齊 倒序顯示 3.column 豎直順序顯示 4.column reverse 豎直倒序顯示 如果一行排不下，如何換行 1.nowrap 預設，不換行 ...
詳解css3彈性盒模型（Flexbox）
今天剛學了css3的彈性盒模型，這是乙個可以讓你告別浮動 完美實現垂直水平居中的新特性。flexbox是布局模組，而不是乙個簡單的屬性，它包含父元素和子元素的屬性。flexbox布局的主體思想是似的元素可以改變大小以適應可用空間，當可用空間變大，flex元素將伸展大小以填充可用空間，當flex元素超...