flex
flex 中文意思為彈性布局。 display：flex
flex是w3s推出的，除盒狀布局之外的一種新布局邏輯。
flex將頁(yè)面視為主軸（main axis）和交叉軸（cross axis），默認(rèn)水平為主軸，左為主軸起點(diǎn)（main start），上為交叉軸起點(diǎn)（cross start）
設(shè)置為flex布局后，子元素的float、clear、vertical-align屬性將會(huì)失效。
我們將采用flex布局的元素稱為flex容器（flex container）。而它的所有子元素將成為容器成員，稱為項(xiàng)目（flex item）
項(xiàng)目默認(rèn)按主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size ，交叉軸空間成為 cross size
> 容器的屬性
flex-direction 主軸方向 ????????????????????????????????????????????????默認(rèn)：row 水平為主軸
flex-wrap ???? 如果交叉軸一條軸上排不下時(shí)，如何換行 默認(rèn)：nowwrap 不換行
flex-flow????????為dircetion 和wrap的簡(jiǎn)寫模式? ? ? ? ? ? ? ? ? 默認(rèn)：row nowrap
justify-content 定義主軸上的對(duì)齊方式? ? ? ? ? ? ? ? ? ? ? ? ? ? 默認(rèn)：flex-start 左對(duì)齊
align-items ????交叉軸上的對(duì)齊方式 ????????????????????????????????默認(rèn)：stretch 占滿容器高度
align-content 多根軸線的對(duì)齊方式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?默認(rèn)：stretch 占滿交叉軸
> 項(xiàng)目的屬性
order ????????????項(xiàng)目的排列順序
flex-grow? ? ? ?項(xiàng)目的放大比例
flex-shrink ????縮小比例
flex-basis? ? ? ?項(xiàng)目占用的主軸空間
flex-grow ????????shrink basis的簡(jiǎn)寫 ????????默認(rèn)： 0 1 auto
align self ????????單個(gè)項(xiàng)目的對(duì)齊方式? ? ? ? 默認(rèn)：繼承容器的align-item屬性
參考文檔：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
盒狀布局
盒狀布局以元素+定位的搭配，實(shí)現(xiàn)頁(yè)面的布局。
盒狀布局將元素視為框。
框分為兩種類型、定位分為四種。
定位定義著框的所屬流。
所屬流分為三種：普通流、浮動(dòng)流、絕對(duì)定位流。
不同流中的框互不影響。
> 框的屬性
框的兩種類型為塊框和行內(nèi)框。
display：block ｜inline
注：不同的元素有不同的默認(rèn)display屬性，sapn和input 的display屬性為inline
> 定位屬性
position? ? ? ?定位的類型???? 默認(rèn)：static
top? ? ? ? ? ? ? 上
right? ? ? ? ? ? 右
bottom? ? ? ? 下
left? ? ? ? ? ? ? ?左
overflow? ? ? ?溢出處理方式 ????默認(rèn)：visible
clip? ? ? ? ? ? ????元素的形狀? ? ? ? 默認(rèn)：auto
vertical- align 垂直對(duì)齊方式? ? 默認(rèn)：baseline
z-index? ? ? ? ? ? 堆疊順序
> 框?qū)?yīng)定位的所屬流
position有四種屬性 static ｜relative｜absolute｜fixed
absolute 和fixed 的元素將會(huì)生成在絕對(duì)定位流中
剩余兩種會(huì)生成在普通流中
> 浮動(dòng)
float：left? 每個(gè)框向左浮動(dòng)。
此時(shí)元素將生成在浮動(dòng)流中
為了兼容浮動(dòng)流和普通流，通過添加一個(gè)空元素，并賦以clear屬性使得浮動(dòng)元素在普通流的容器中占據(jù)位置。
> 常用場(chǎng)景
* 令彈窗居中（flex應(yīng)用）
.box{
? display: flex; //彈性布局
? display: -webkit-flex;
? border: 1px solid #0000FF;
? height: 200px;
? width: 400px;
? align-items:center; //項(xiàng)目排列 居中
? justify-content:center;? //對(duì)齊方式 居中對(duì)齊
}
.item{
? width: 50px;
? height: 40px;
? border: 1px solid #00C1B3;
}
* 令彈窗居中（position：fixed應(yīng)用）
.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;}
* 網(wǎng)格布局
.Grid {display:flex;}.Grid-cell {flex:1;}
* 圣杯布局（flex應(yīng)用）
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 {
????? /* 兩個(gè)邊欄的寬度設(shè)為12em */
????? flex: 0 0 12em;
????}
????.HolyGrail-nav {
????? /* 導(dǎo)航放到最左邊 */
? ????order: -1;
????}
* 圣杯布局（position應(yīng)用）
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設(shè)定了更多種對(duì)齊類型，減少了對(duì)長(zhǎng)寬等屬性的關(guān)注，只需對(duì)部分固定寬度的項(xiàng)目進(jìn)行設(shè)定，剩下就可以交由瀏覽器自行處理。盒裝更像是作畫的思路，設(shè)定好頁(yè)面上的每一像素，最后就會(huì)得到一副畫。相對(duì)來(lái)說(shuō)flex布局減少了對(duì)每個(gè)框的關(guān)注，對(duì)個(gè)人來(lái)說(shuō)，減少了工作量。
（但盒狀布局也很驚艷，如果有理解錯(cuò)誤的地方歡迎指出，謝謝
