長時間未曾動筆至今已忘了如何組織語言，故注冊此博客園帳號。一來，總結自己平時編程中遇到的“坑”；二來，記錄下自己的編程生涯，以待來日回顧。本篇總結的來源是近期自己所負責的一個雲平台項目。這是第一篇，關於布局。
傳統的布局方式一般都是盒模型，並依賴於display、position或者float。然而position具有不能自適應內部高度的缺點，需要固定的容器高度；float存在父元素塌陷，需要用清除浮動解決；同時，對於某些布局方式也較為麻煩，例如垂直居中。如果使用傳統的盒模型方法的話，其代碼一般為：
.mid{position:absolute;left:50%;top:50%;margin-top:-1/2*Height;margin-left:-1/2*Width;}
本種方法不易於維護，同時需要固定父元素高度，所以，為了解決這個問題，引入了flexbox（彈性布局）。在 .mid 的父元素上使用flex定位，可以輕松解決這個問題。當然，為了保證瀏覽器兼容性，需要加上瀏覽器私有前綴。
1 .wrap{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}
不僅如此，在寫頂部的banner時候可以令父元素如下：
justify-content:space-between;
讓網站logo，選項框以及登陸按鈕布局較為美觀。不過在使用了flex布局后，float，clear，vertical-align屬性都將失效。
其他一些flex屬性：1、flex-direction：定義項目的排列方向。2、flex-wrap：定義主軸上的元素是否可以換行。3、align-items：定義項目在垂直於主軸的方向上如何對齊。4、align-content：定義多根主軸的對齊。以上屬性都是寫在父元素內的，而子元素中也有一些flex屬性：
1、order：定義項目的排列順序，越小越靠前。2、flex-grow：定義項目的放大系數，如果為0，則不放大。3、flex-shrink：與flex-grow相反。4、flex-basis：設置項目在主軸上占據的空間。5、align-self：為特定子元素提供定制的對齊，將會覆蓋父元素的align-items屬性。
其他一些布局心得：
1、不要隨意使用float以及position布局，避免引起高度塌陷。
2、書寫樣式時最好使用類不要使用ID，以便於代碼的重用。
3、布局前先確定好整體的頁面結構以及使用的布局方法，避免中后期發現布局方法不合適，導致整個項目推倒重來。
4、將footer固定到頁面底部：不管是body內元素堆疊高度和是小於瀏覽器高度還是高於瀏覽器高度，只需要將wrap內的其他元素與footer元素放在兩個不同的div內，第一個div的高度設為100%，margin-bottom設為footer的高度即可。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex布局</title> <style> *{margin: 0;padding: 0;} html,body{width: 100%;height: 100%;} .main,.wrap{width: 100%;height: 100%;} .main{margin-bottom: -100px;} .footer{width: 100%;height: 100px;background-color: #000;} </style> </head> <link rel="stylesheet" href="./layout.css"> <body> <div class="wrap"> <div class="main"> <div class="header"></div> <div class="content"></div> </div> <div class="footer"></div> </div> </body> </html>
粗淺之言，請勿見笑。