可設定的屬性有：align-items、flex-direction、align-content、justify-content、flex-wrap、flex、align-self、flex-grow、flex-shrink、flex-basis
前提：父元素設定了display：flex;
align-items：在父元素內設定，用於確定子元素在父元素內在縱軸的排列，前提是父元素沒有設定換行，可用值：center（垂直居中），flex-start（開頭），flex-end（底部），baseline（基於基線）
flex-direction：父元素內設定，設定子元素的排列方向，可用值：row（一行顯示），row-reverse（一行內逆序顯示），column（一列顯示），column-reverse（一列逆序顯示）
align-content：在父元素內設定，用於確定子元素之間在縱軸上的排列，前提是子元素的寬度之和比父元素的寬度要大，且父元素要設定換行（flex-wrap：wrap），
可用值：center（子元素垂直居於父元素的中部），stretch（拉公升子元素到充滿父元素，前提子元素沒有設定高度），flex-start（頂部），flex-end（底部）
space-between（子元素之間留有空隙），space-around（子元素的上下左右都留有空隙）。
justify-content：在父元素內設定，確定子元素在父元素水平方向上的位置，可用值：center(水平居中，沒有間隙)，flex-start（預設，位於頭部沒有間隙），flex-end（容器尾部），space-between（子元素之間留有間隙），space-around（子元素周圍留有間隙）
flex-wrap：父元素內設定，確定在子元素寬度之和大於父元素時是否換行顯示，可用值：nowrap（不換行，可能導致溢位），warp（超出時換行顯示），wrap-reverse（超出時反轉順序顯示）
flex:子元素內設定，確定子元素在父元素中所佔比例，可用值：auto/1（根據內容自動平均分配），其他數字（基準值的幾分之幾，2即為2分之一以此類推）
align-self：在子元素內設定，首先他會覆蓋掉父元素賦予子元素的align-items屬性，單獨給自己設定在父元素內的顯示位置，可用值：同align-items
flex-grow：子元素內設定，相對於基準值擴大一定比例，可用值：數字
flex-shink：子元素內設定，相對於基準值縮小一定比例，可用值：數字
flex-basis：子元素內設定，設定基準值，可用值：畫素
css3 彈性布局和多列布局
彈性盒子 flexible box 是css3中盒子模型的彈性布局，在傳統的布局方式上增加了很多靈活性。在父盒子上定義display屬性 box當然還有行內布局的彈性盒子 box注意，設為flex布局以後，子元素的float clear和vertical align屬性將失效。彈性盒子兩個軸如圖 在...
兩列布局 多列布局
用css html編寫乙個兩列布局的網頁，要求右側寬度為200px，左側自動擴充套件 container left div right div div 利用浮動float margin container left right利用彈性盒子來寫 container left right利用定位posi...
HTML css多列布局
在css3中，也新增了一些關於文字布局的幾個比較簡單的屬性。通過這些新增的屬性，我們可以對文字進行簡單的排版，就想報紙和雜誌那樣。新增的部分屬性，以及瀏覽器支援情況 屬性瀏覽器支援 column count iefirefox moz chrome webkit safari webkit oper...