Flex布局方案很早都提出來了，然后可以簡便、完整、響應式地實現各種頁面布局。隨著瀏覽器的發展，目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。.
在網頁設計過程中，水平垂直居中是很常用的，但是傳統的方案使用起來分廠費勁，下面來看flex如何實現
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
display: flex;
width: 100%;
height: 100%;
background: #eee;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 300px;
background: yellowgreen;
}
<body>
<div class="box"></div>
</body>
如此看來這樣水平垂直居中是不是很方便的實現了，
意為"彈性盒模型"，用來為盒狀模型提供最大的靈活性。Webkit 內核的瀏覽器，必須加上-webkit前綴。 當父容器設置了display：flex時。子元素自動成為其成員， 容器默認存在兩根軸：水平方向的主軸和垂直的交叉軸，項目默認沿主軸排列。
//屬性決定主軸的方向（即項目的排列方向）
flex-direction
//默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行
flex-wrap
//flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
flex-flow
//屬性定義了項目在主軸上的對齊方式。
justify-content
//屬性定義項目在交叉軸上如何對齊。
align-items
//屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
align-content
//定義項目的排列順序。數值越小，排列越靠前，默認為0。
order
//定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
flex-grow
//flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
flex-shrink
//定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
flex-basis
//flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選
flex
//允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
align-self
css3中的flex布局是很方便布局的，雖然是個新東西，但是瀏覽器的發展，對其的支持也較好，建議在以后的設計中多去使用，一方面是潮流，另一方面，也是推動技術發展
最新動態
常見問題百寶箱
A2014，有位學妹不顧家人反對，在上海這個國際化大都市謀了一個公眾號助理的職位。斗志昂揚地奮斗了 3 年，我眼看著她的內容駕馭能力突飛猛進，內容質量從三流到一流，職位
A文章主要分析了不同的視覺設計元素是如何影響網站用戶體驗，希望通過文章的解讀能夠對你的產品設計帶來些啟發。 也許是因為我在視覺設計上沒有太多經驗，我發現
A雙贏系統建站系統，三網同步，建站推廣一步到位雙贏系統建站系統，三網同步，建站推廣一步到位雙贏系統建站系統，三網同步，建站推廣一步到位雙贏系統建站系統，三網同步，建站推
Copyright 2013-2020 All Rights Reserved 武漢互贏網絡科技股份有限公司 鄂ICP備19027860號
