flex
flex 中文意思為彈性布局。 display：flex
flex是w3s推出的，除盒狀布局之外的一種新布局邏輯。
flex將頁面視為主軸（main axis）和交叉軸（cross axis），默認水平為主軸，左為主軸起點（main start），上為交叉軸起點（cross start）
設置為flex布局后，子元素的float、clear、vertical-align屬性將會失效。
我們將采用flex布局的元素稱為flex容器（flex container）。而它的所有子元素將成為容器成員，稱為項目（flex item）
項目默認按主軸排列。單個項目占據的主軸空間叫做main size ，交叉軸空間成為 cross size
> 容器的屬性
flex-direction 主軸方向 ????????????????????????????????????????????????默認：row 水平為主軸
flex-wrap ???? 如果交叉軸一條軸上排不下時，如何換行 默認：nowwrap 不換行
flex-flow????????為dircetion 和wrap的簡寫模式? ? ? ? ? ? ? ? ? 默認：row nowrap
justify-content 定義主軸上的對齊方式? ? ? ? ? ? ? ? ? ? ? ? ? ? 默認：flex-start 左對齊
align-items ????交叉軸上的對齊方式 ????????????????????????????????默認：stretch 占滿容器高度
align-content 多根軸線的對齊方式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?默認：stretch 占滿交叉軸
> 項目的屬性
order ????????????項目的排列順序
flex-grow? ? ? ?項目的放大比例
flex-shrink ????縮小比例
flex-basis? ? ? ?項目占用的主軸空間
flex-grow ????????shrink basis的簡寫 ????????默認： 0 1 auto
align self ????????單個項目的對齊方式? ? ? ? 默認：繼承容器的align-item屬性
參考文檔：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
盒狀布局
盒狀布局以元素+定位的搭配，實現頁面的布局。
盒狀布局將元素視為框。
框分為兩種類型、定位分為四種。
定位定義著框的所屬流。
所屬流分為三種：普通流、浮動流、絕對定位流。
不同流中的框互不影響。
> 框的屬性
框的兩種類型為塊框和行內框。
display：block ｜inline
注：不同的元素有不同的默認display屬性，sapn和input 的display屬性為inline
> 定位屬性
position? ? ? ?定位的類型???? 默認：static
top? ? ? ? ? ? ? 上
right? ? ? ? ? ? 右
bottom? ? ? ? 下
left? ? ? ? ? ? ? ?左
overflow? ? ? ?溢出處理方式 ????默認：visible
clip? ? ? ? ? ? ????元素的形狀? ? ? ? 默認：auto
vertical- align 垂直對齊方式? ? 默認：baseline
z-index? ? ? ? ? ? 堆疊順序
> 框對應定位的所屬流
position有四種屬性 static ｜relative｜absolute｜fixed
absolute 和fixed 的元素將會生成在絕對定位流中
剩余兩種會生成在普通流中
> 浮動
float：left? 每個框向左浮動。
此時元素將生成在浮動流中
為了兼容浮動流和普通流，通過添加一個空元素，并賦以clear屬性使得浮動元素在普通流的容器中占據位置。
> 常用場景
* 令彈窗居中（flex應用）
.box{
? display: flex; //彈性布局
? display: -webkit-flex;
? border: 1px solid #0000FF;
? height: 200px;
? width: 400px;
? align-items:center; //項目排列 居中
? justify-content:center;? //對齊方式 居中對齊
}
.item{
? width: 50px;
? height: 40px;
? border: 1px solid #00C1B3;
}
* 令彈窗居中（position：fixed應用）
.box{
background:whitesmoke;
position:fixed;
top:50%;
left:50%;
transform:translateX(-50%)translateY(-50%);
min-width:700px;
border-radius:8px;
padding:0px
}
* 骰子布局
.box {display:flex;}
.item:nth-child(2) {align-self:center;}.
item:nth-child(3) {align-self:flex-end;}
* 網格布局
.Grid {display:flex;}.Grid-cell {flex:1;}
* 圣杯布局（flex應用）
html部分：
????<body class="HolyGrail">
? ????<header>...</header>
? ????<div class="HolyGrail-body">
? ????? <main class="HolyGrail-content">...</main>
? ????? <nav class="HolyGrail-nav">...</nav>
? ????? <aside class="HolyGrail-ads">...</aside>
????? </div>
????? <footer>...</footer>
????</body>
CSS部分：
????.HolyGrail {
????? display: flex;
????? min-height: 100vh;
????? flex-direction: column;
????}
????header,footer {
????? flex: 1;
????}
????.HolyGrail-body {
????? display: flex;
????? flex: 1;
????}
????.HolyGrail-content {
????? flex: 1;
????}
????.HolyGrail-nav, .HolyGrail-ads {
????? /* 兩個邊欄的寬度設為12em */
????? flex: 0 0 12em;
????}
????.HolyGrail-nav {
????? /* 導航放到最左邊 */
? ????order: -1;
????}
* 圣杯布局（position應用）
html部分：
<body>
? <div id="header">#header</div>
? <div id="container">
? ? <div id="center" class="column">#center</div>
? ? <div id="left" class="column">#left</div>
? ? <div id="right" class="column">#right</div>
? </div>
? <div id="footer">#footer</div>
</body>
css部分：
body {
? ? min-width: 550px;? /* 2x leftContent width + rightContent width */
? ? font-weight: bold;
? ? font-size: 20px;
? }
? #header, #footer {
? ? background: rgba(29, 27, 27, 0.726);
? ? text-align: center;
? ? height: 60px;
? ? line-height: 60px;
? }
? #footer {
? ? clear: both;
? }
? #container {
? ? padding-left: 200px;? /* leftContent width */
? ? padding-right: 150px;? /* rightContent width */
? ? overflow: hidden;
? }
? #container .column {
? ? position: relative;
? ? float: left;
? ? text-align: center;
? ? height: 300px;
? ? line-height: 300px;
? }
? #center {
? ? width: 100%;
? ? background: rgb(206, 201, 201);
? }
? #left {
? ? width: 200px;? ? ? ? ? /* leftContent width */
? ? right: 200px;? ? ? ? ? /* leftContent width */
? ? margin-left: -100%;
? ? background: rgba(95, 179, 235, 0.972);
? }
? #right {
? ? width: 150px;? ? ? ? ? /* rightContent width */
? ? margin-left: -150px;? /* rightContent width */
? ? right: -150px;
? ? background: rgb(231, 105, 2);
? }
* 輸入框布局
.InputAddOn {display:flex;}.InputAddOn-field {flex:1;}
* 固定底欄
.Site {display:flex;min-height:100vh;flex-direction:column;}.Site-content {flex:1;}
* 流式布局
.parent {width:200px;height:150px;background-color:black;display:flex;flex-flow:row wrap;align-content:flex-start;}
.child {box-sizing:border-box;background-color:white;flex:0 0 25%;height:50px;border:1px solid red;}
參考文檔：
小記：flex和盒狀是兩種不同的布局思路，flex設定了更多種對齊類型，減少了對長寬等屬性的關注，只需對部分固定寬度的項目進行設定，剩下就可以交由瀏覽器自行處理。盒裝更像是作畫的思路，設定好頁面上的每一像素，最后就會得到一副畫。相對來說flex布局減少了對每個框的關注，對個人來說，減少了工作量。
（但盒狀布局也很驚艷，如果有理解錯誤的地方歡迎指出，謝謝
