1. flex布局概述
盒子模型
浮動(dòng)布局
彈性布局（或者叫彈性盒子布局）垃喊，這是一種更先進(jìn)的布局方式尖淘，可以讓網(wǎng)頁布局更簡(jiǎn)潔颈将，更易于維護(hù)驹针。
2.flex容器
.box{
display:flex;
}
此容器會(huì)變成一個(gè)flex容器（flex container）殖告，容器內(nèi)部的元素被稱為flex項(xiàng)目（flex item）阿蝶，
在這個(gè)容器內(nèi)部浮動(dòng)會(huì)失效，通過設(shè)置flex容器的css樣式黄绩，可以改變內(nèi)部項(xiàng)目的布局方式羡洁。
一個(gè)flex容器默認(rèn)存在兩個(gè)軸，橫向的主軸（main軸）和縱向的交叉軸（cross軸）爽丹。
默認(rèn)情況下flex項(xiàng)目按照main軸排列焚廊，通過設(shè)置，可以讓項(xiàng)目按照cross軸排列习劫，示例代碼如下所示：
<divclass="container">
<divclass="box">1</div>
<divclass="box">2</div>
<divclass="box">3</div>
</div>
.container{
display:flex;
}
.box{
border:1px solid red;
}
默認(rèn)情況下flex容器內(nèi)部的元素是按照主軸排列的咆瘟，并且塊元素不會(huì)獨(dú)立成行。
2.1? flex-direction
通過flex-direction屬性诽里，可以設(shè)置flex容器按主軸或是交叉軸排列袒餐。
flex-direction:row;默認(rèn)值，項(xiàng)目按主軸排列谤狡，高度為容器高度灸眼。
flex-direction:column;項(xiàng)目按交叉軸排列，長(zhǎng)度為容器長(zhǎng)度墓懂。
.container{
display:flex;/* flex-direction: column; */
flex-direction:row;
border:1px solid #00f;
height:200px;
}
.box{
border:1pxsolidred;
}
flex項(xiàng)目按照主軸排列焰宣，此功能可以完全取代浮動(dòng)布局，而且不必考慮浮動(dòng)元素脫離文檔流的種種弊端捕仔。
如果不考慮瀏覽器兼容問題匕积，那么flex布局大部分情況都可以很好地替代浮動(dòng)布局。
2.2 justify-content
justify-content屬性可以控制flex項(xiàng)目在容器中的水平排列方式
.container{
display:flex;
border:1px solid #00f;
height:200px;/* flex項(xiàng)目按水平排列 */j
ustify-content:center;
}
justify-content:flex-start;flex項(xiàng)目在主軸開始位置展示
justify-content:flex-end;flex項(xiàng)目在主軸結(jié)束位置展示
justify-content:flex-center;flex項(xiàng)目在主軸居中展示
此前我們將一個(gè)元素居中顯示榜跌，通常將設(shè)置元素設(shè)置為固定寬度闪唆，然后為其設(shè)置屬性margin：0 auto;
對(duì)于寬度不固定的元素，我們只能使用一些奇淫技巧讓其居中钓葫。
現(xiàn)在有了flex布局悄蕾，我們可以很輕易的讓一個(gè)或多個(gè)不定寬度的元素居中。
2.3 align-items
align-items屬性可以控制flex項(xiàng)目在容器中的垂直排列方式础浮，示例代碼如下所示
.container{
display:flex;
border:1px solid #00f;
height:200px;
justify-content:center;
align-items:center;
}
.box{
border:1px solid #f00;
height:50px;
}
align-items:flex-start;flex項(xiàng)目在交叉軸開始位置展示
align-items:flex-end;flex項(xiàng)目在交叉軸結(jié)束位置展示
align-items:flex-center;flex項(xiàng)目在交叉軸居中展示
nter;}.box{border:1pxsolid#f00;height:50px;}.item1{flex:1;}.item2{flex:2;}.item3{flex:3;}
1. grid布局概述
1.1 grid布局與flex布局對(duì)比
grid布局可以為網(wǎng)頁提供更強(qiáng)大的布局功能帆调，它與flex布局的區(qū)別是奠骄。
flex布局為一維布局，一般一行或一列的布局使用flex布局番刊。
grid布局為二維布局含鳞，同時(shí)需要兼顧行與列的布局，可以使用gird布局撵枢。
如果不考慮兼容問題民晒，flex布局和grid布局可以很好地替代浮動(dòng)布局。
1.2 grid布局基本概念
grid容器的水平區(qū)域成為行（row）锄禽，垂直區(qū)域成為列（column）潜必，行與列之間的較差與是單元格（cell），劃分網(wǎng)格的線成為網(wǎng)格線（gird line）沃但，了解了這些基本概念之后磁滚，就可以開始用相應(yīng)的css屬性設(shè)置grid容器中的項(xiàng)目了。
2. grid容器
2.1 設(shè)置grid容器
.container{
display:grid;
}
gird容器內(nèi)部的元素稱為grid容器的項(xiàng)目宵晚，grid項(xiàng)目的float屬性會(huì)失效垂攘，通過grid容器的進(jìn)一步設(shè)置，可以讓內(nèi)部的項(xiàng)目按要求排列淤刃。
2.2grid-template-columns屬性與grid-template-rows屬性
grid-template-columns可以設(shè)置gird容器中的項(xiàng)目有多少列晒他，并指定列的寬度，實(shí)例代碼如下所示
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
.container{
display:grid;
grid-template-columns:100px 100px 100px;
}
.item{
border:1px solid red;
}
通過上面的樣式設(shè)置逸贾，可以將grid容器設(shè)置成為三列陨仅，并將每一列的寬度設(shè)置為100px。
除了設(shè)置制定尺寸的像素铝侵，還可以通過fr單位設(shè)置列寬度的比例灼伤。修改上面的grid容器樣式如下所示
.container{
display:grid;
grid-template-columns:1fr 1fr 2fr;
}
可以看到整個(gè)gird容器的列被4等分，其中第一列和第二列占1份（1fr）咪鲜，第三列占2份（2fr）狐赡。
gird-template-rows屬性可以設(shè)置gird容器中的項(xiàng)目有多少行，并指定行的寬度
.container{
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
}
通過上面的樣式疟丙，可以將grid容器設(shè)置成為一個(gè)三行三列的布局颖侄，并且每一個(gè)單元格都為100px。
2.3grid-column-gap屬性與grid-row-gap屬性
grid-column-gap屬性與grid-row-gap屬性可以為grid容器的行與列之間設(shè)置間距：
.container{
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
grid-row-gap:20px;
grid-column-gap:30px;
}
可以將行（row）之間的間距設(shè)置為20像素隆敢，將列（column）之間的間距設(shè)置為30像素发皿。
2.4justify-items屬性與align-items屬性
justify-items屬性與align-items屬性可以設(shè)置單元的水平位置和垂直位置
.container{
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
/* 在單元格內(nèi)水平居中 */justify-items:center;
/* 在單元格內(nèi)存執(zhí)居中 */align-items:center;
}
默認(rèn)的情況下，grid容器單元格內(nèi)的塊元素會(huì)適應(yīng)單元的的寬度和高度拂蝎，設(shè)置justify-items后，單元格內(nèi)的元素會(huì)適應(yīng)自身內(nèi)容的寬度惶室，設(shè)置align-items后温自，單元格內(nèi)的元素會(huì)使用內(nèi)容的高度玄货。
將justify-items和align-items兩個(gè)屬性設(shè)置為center，可以將單元格內(nèi)的內(nèi)容垂直水平居中顯示悼泌。
2.5justify-content屬性與aling-content屬性
通過justify-content屬性與aling-content屬性可以設(shè)置整個(gè)內(nèi)容區(qū)域在容器里面的水平位置和垂直位置松捉。
3.grid項(xiàng)目
justify-self屬性可以設(shè)置單元格內(nèi)容的水平位置。
align-self屬性可以設(shè)置單元內(nèi)容的垂直位置馆里。
grid-column-start屬性與grid-column-end屬性
指定左右邊框垂直網(wǎng)格線
grid-row-start屬性與grid-row-end屬性
指定上下邊框水平網(wǎng)格線
