flex
超過一層后樣式就復(fù)雜了，特別是邊框的處理有點(diǎn)復(fù)雜。(方法很多，不一一去展示了)。
<html><head><styletype="text/css">.box {? ? ? padding: 10px;? ? ? padding-bottom: 0;? ? ? padding-right: 0;? ? ? display: flex;? ? ? flex-direction: column;? ? ? height: 800px;? ? ? width: calc(100vw - 20px);? ? ? background-color: #000;? ? }? ? .content {? ? ? display: flex;? ? ? margin-bottom: 10px;? ? ? flex: 1? ? }? ? .b {? ? ? flex: 1;? ? ? margin-right: 10px;? ? ? background-color: yellow;? ? }</style></head><body><divclass="box"><divclass="content"><divclass="b">1</div><divclass="b">2</div><divclass="b">3</div></div><divclass="content"><divclass="b">4</div><divclass="b">5</div><divclass="b">6</div></div><divclass="content"><divclass="b">7</div><divclass="b">8</div><divclass="b">9</div></div><div></body></html>
效果圖：
flex
grid
真的好用！方法也可以有很多，相對(duì)flex而言寫起來簡(jiǎn)單多了哈
<html><head><styletype="text/css">.content {? ? ? padding: 10;? ? ? display: grid;? ? ? grid-template-columns: auto auto auto;? ? ? grid-template-rows: auto auto auto;? ? ? height: 780px;? //padding 有個(gè)20的寬度? ? ? background-color: #000;? ? ? grid-gap: 10px;? ? }? ? .b {? ? ? background-color: yellow;? ? }</style></head><body><divclass="content"><divclass="b">1</div><divclass="b">2</div><divclass="b">3</div><divclass="b">4</div><divclass="b">5</div><divclass="b">6</div><divclass="b">7</div><divclass="b">8</div><divclass="b">9</div></div></body></html>
效果圖：
grid
接下來就只講grid了。
常用屬性，屬性很多，主要練習(xí)下常用的一些屬性：
grid:? 1fr 1fr 1fr/1fr 1fr 1fr ; 高度 高度 高度/(一)列? (二)列? (三) 列
grid: 100px 200px 100px /1fr 1fr 1fr;
等于：
grid-template-rows:100px200px100px;grid-template-columns:1fr1fr1fr;grid-template-areas:none;grid-auto-flow:initial;grid-auto-rows:initial;grid-auto-columns:initial;
grid-template-columns: 100px 100px;? //有幾列，每列有多大
grid-template-rows :100px 100px;? //有幾行，每行有多大
grid-template: [] '1 1 1' 100px [] /auto 50px auto;
//[名稱]? '幾列'? 這行的高度 [名稱] /三列對(duì)應(yīng)的三個(gè)寬度
//（名稱可為空 '1 1 1' 就是均分三列）
grid-gap: 10px 20px ;//上下間隔10px，左右間隔20px
grid-gap: 10px；//上下左右間隔10px
grid-column-gap
grid-row-gap
justify-items：
start：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域(grid area)的左側(cè)
end：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的右側(cè)
center：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間（水平居中）
stretch：填滿網(wǎng)格區(qū)域?qū)挾龋J(rèn)值）
align-items：
start：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域(grid area)的頂部
end：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的底部
center：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間（垂直居中）
stretch：填滿網(wǎng)格區(qū)域高度（默認(rèn)值）
justify-items：
start：將網(wǎng)格對(duì)齊到 網(wǎng)格容器(grid container) 的左邊
end：將網(wǎng)格對(duì)齊到 網(wǎng)格容器 的右邊
center：將網(wǎng)格對(duì)齊到 網(wǎng)格容器 的中間（水平居中）
stretch：調(diào)整 網(wǎng)格項(xiàng)(grid items) 的寬度，允許該網(wǎng)格填充滿整個(gè) 網(wǎng)格容器 的寬度
space-around：在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間，左右兩端放置一半的空間
space-between：在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間，左右兩端沒有空間
space-evenly：在每個(gè)柵格項(xiàng)目之間放置一個(gè)均勻的空間，左右兩端放置一個(gè)均勻的空間
align-content：
start：將網(wǎng)格對(duì)齊到 網(wǎng)格容器(grid container) 的頂部
end：將網(wǎng)格對(duì)齊到 網(wǎng)格容器 的底部
center：將網(wǎng)格對(duì)齊到 網(wǎng)格容器 的中間（垂直居中）
stretch：調(diào)整 網(wǎng)格項(xiàng)(grid items) 的高度，允許該網(wǎng)格填充滿整個(gè) 網(wǎng)格容器 的高度
space-around：在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間，上下兩端放置一半的空間
space-between：在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間，上下兩端沒有空間
space-evenly：在每個(gè)柵格項(xiàng)目之間放置一個(gè)均勻的空間，上下兩端放置一個(gè)均勻的空間
