一、Flex布局
1.布局原理
采用 Flex 布局的元素规婆，稱為 Flex 容器（flex container）抒蚜，簡稱"容器"嗡髓。它的所有子元素自動(dòng)成為容器成員饿这，稱為Flex 項(xiàng)目（flex item）长捧，簡稱"項(xiàng)目"串结。
當(dāng)我們?yōu)楦负凶釉O(shè)為 flex 布局以后肌割，子元素的float把敞、clear和 vertical-align屬性將失效。
伸縮布局 = 彈性布局 = 伸縮盒布局 = 彈性盒布局=flex布局
總結(jié)flex布局原理： 就是通過給父盒子添加flex屬性冒冬，來控制子盒子的位置和排列方式
2. flex布局父項(xiàng)常見屬性
flex-direction：設(shè)置主軸的方向
justify-content：設(shè)置主軸上的子元素排列方式
flex-wrap：設(shè)置子元素是否換行
align-content：設(shè)置側(cè)軸上的子元素的排列方式（多行）
align-items：設(shè)置側(cè)軸上的子元素排列方式（單行）
flex-flow：復(fù)合屬性简烤，相當(dāng)于同時(shí)設(shè)置了 flex-direction 和 flex-wrap
3.align-content 和align-items區(qū)別
align-items 適用于單行情況下挥萌， 只有上對齊引瀑、下對齊憨栽、居中和 拉伸
align-content適應(yīng)于換行（多行）的情況下（單行情況下無效）屑柔， 可以設(shè)置上對齊死陆、下對齊措译、居中领虹、拉伸以及平均分配剩余空間等屬性值掠械。
總結(jié)就是單行找align-items 多行找 align-content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 100px auto;
display: flex;
/* 1.從右往左
flex-direction: row-reverse;
2.折行顯示猾蒂，默認(rèn)不折行
flex-wrap: wrap;
3.復(fù)合寫法 ,中間空格隔開
flex-flow: column wrap;
4.主軸子項(xiàng)排列
justify-content 屬性（水平）對齊彈性容器的項(xiàng)目，當(dāng)項(xiàng)目不占用主軸上所有可用空間時(shí)罩缴。*/
justify-content: space-around;
flex-wrap: wrap;
/* 5.子項(xiàng)對齊方式 */
align-items: flex-end;
}
#box1 div {
width: 50px;
/*5. height: 50px; */
background-color: aqua;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="box1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
4.flex布局子項(xiàng)屬性
order：改變某一個(gè)flex子項(xiàng)的位置烙荷，默認(rèn)值是0
flex-grow：擴(kuò)展flex子項(xiàng)所占據(jù)的寬度
flex-shrink：當(dāng)flex容器空間不足的時(shí)候终抽，單個(gè)元素的收縮比例昼伴，默認(rèn)是1
flex-basis：定義了在分配剩余空間之前元素的默認(rèn)大小
flex：是flex-grow圃郊，flex-shrink持舆，flex-basis的縮寫
align-self：控制單獨(dú)某一個(gè)flex子項(xiàng)的垂直對齊方式
二逸寓、flex骰子練習(xí)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 100px;
height: 100px;
border: 1px black solid;
border-radius: 5px;
display: flex;
justify-content: center;
}
#box1 div {
width: 30%;
height: 30%;
border-radius: 50%;
background-color: black;
align-self: center;
}
#box2 {
margin-top: 10px;
width: 100px;
height: 100px;
border: 1px black solid;
border-radius: 5px;
display: flex;
justify-content: space-between;
}
#box2 div {
width: 30%;
height: 30%;
border-radius: 50%;
background-color: black;
}
#box2 div:last-child {
align-self: end;
}
#box3 {
margin-top: 10px;
width: 100px;
height: 100px;
border: 1px black solid;
border-radius: 5px;
display: flex;
justify-content: space-between;
}
#box3 div {
width: 30%;
height: 30%;
border-radius: 50%;
background-color: black;
}
#box3 div:nth-child(2) {
align-self: center;
}
#box3 div:nth-child(3) {
align-self: flex-end;
}
#box4 {
margin-top: 10px;
width: 100px;
height: 100px;
border: 1px black solid;
border-radius: 5px;
display: flex;
flex-wrap: wrap;
}
#box4 div {
width: 100%;
display: flex;
justify-content: space-between;
}
#box4 div:last-child {
align-items: flex-end;
}
#box4 i {
display: block;
width: 30%;
height: 60%;
background-color: black;
border-radius: 50%;
}
#box5 {
margin-top: 10px;
width: 100px;
height: 100px;
border: 1px black solid;
border-radius: 5px;
display: flex;
flex-wrap: wrap;
}
#box5 div {
width: 100%;
display: flex;
justify-content: center;
}
#box5 div:first-child {
align-items: start;
justify-content: space-between;
}
#box5 div:last-child {
align-items: flex-end;
justify-content: space-between;
}
#box5 i {
display: block;
width: 30%;
height: 90%;
background-color: black;
border-radius: 50%;
}
#box6 {
margin-top: 10px;
width: 100px;
height: 100px;
border: 1px black solid;
border-radius: 5px;
display: flex;
flex-wrap: wrap;
}
#box6 div {
width: 100%;
display: flex;
justify-content: space-between;
}
#box6 div:first-child {
align-items: start;
justify-content: space-between;
}
#box6 div:last-child {
align-items: flex-end;
justify-content: space-between;
}
#box6 i {
display: block;
width: 30%;
height: 90%;
background-color: black;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="box1">
<div></div>
</div>
<div id="box2">
<div></div>
<div></div>
</div>
<div id="box3">
<div></div>
<div></div>
<div></div>
</div>
<div id="box4">
<div>
<i></i>
<i></i>
</div>
<div>
<i></i>
<i></i>
</div>
</div>
<div id="box5">
<div>
<i></i>
<i></i>
</div>
<div>
<i></i>
</div>
<div>
<i></i>
<i></i>
</div>
</div>
<div id="box6">
<div>
<i></i>
<i></i>
</div>
<div>
<i></i>
<i></i>
</div>
<div>
<i></i>
<i></i>
</div>
</div>
</body>
</html>
三、grid布局
(一)生巡、概念
1.網(wǎng)格布局（Grid）是最強(qiáng)大的 CSS 布局方案孤荣。
2.它將網(wǎng)頁劃分成一個(gè)個(gè)網(wǎng)格盐股，可以任意組合不同的網(wǎng)格疯汁，做出各種各樣的布局幌蚊。以前溢豆，只能通過復(fù)雜的 CSS 框架達(dá)到的效果漩仙，現(xiàn)在瀏覽器內(nèi)置了讯赏。
3.Grid 布局與 Flex 布局 有一定的相似性漱挎，都可以指定容器內(nèi)部多個(gè)項(xiàng)目的位置磕谅。但是膊夹，它們也存在重大區(qū)別放刨。
4.Flex 布局是軸線布局进统，只能指定"項(xiàng)目"針對軸線的位置螟碎，可以看作是一維布局掉分。Grid 布局則是將容器劃分成"行"和"列"酥郭，產(chǎn)生單元格不从，然后指定"項(xiàng)目所在"的單元格载弄，可以看作是二維布局宇攻。Grid 布局遠(yuǎn)比 Flex 布局強(qiáng)大倡勇。
（二）妻熊、容器屬性
1.grid-template-columns 屬性扔役、 grid-template-rows 屬性
容器指定了網(wǎng)格布局以后亿胸，接著就要?jiǎng)澐中泻土小rid-template-columns屬性定義每一列的列寬婉刀，grid-template-rows屬性定義每一行的行高突颊。
2.repeat()
有時(shí)候律秃，重復(fù)寫同樣的值非常麻煩友绝，尤其網(wǎng)格很多時(shí)迁客。這時(shí)掷漱，可以使用repeat()函數(shù)卜范，簡化重復(fù)的值海雪。上面的代碼用repeat()改寫如下奥裸。
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
3.grid-row-gap 屬性湾宙，grid-column-gap 屬性侠鳄，grid-gap 屬性
grid-row-gap屬性設(shè)置行與行的間隔（行間距）伟恶，grid-column-gap屬性設(shè)置列與列的間隔（列間距）知押。
- grid-template-areas 屬性
網(wǎng)格布局允許指定"區(qū)域"（area），一個(gè)區(qū)域由單個(gè)或多個(gè)單元格組成罢绽。grid-template-areas屬性用于定義區(qū)域。
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
5.justify-items 屬性明垢，align-items 屬性市咽，place-items 屬性
justify-items屬性設(shè)置單元格內(nèi)容的水平位置（左中右）施绎，align-items屬性設(shè)置單元格內(nèi)容的垂直位置（上中下）谷醉。
6.justify-content 屬性俱尼，align-content 屬性遇八，place-content 屬性
justify-content屬性是整個(gè)內(nèi)容區(qū)域在容器里面的水平位置（左中右），align-content屬性是整個(gè)內(nèi)容區(qū)域的垂直位置（上中下）蔑歌。
(三)次屠、子項(xiàng)屬性
1.grid-column-start 屬性劫灶，grid-column-end 屬性本昏，grid-row-start 屬性涌穆，grid-row-end 屬性
項(xiàng)目的位置是可以指定的趁舀，具體方法就是指定項(xiàng)目的四個(gè)邊框矮烹，分別定位在哪根網(wǎng)格線奉狈。
2.grid-column 屬性仁期，grid-row 屬性
grid-column屬性是grid-column-start和grid-column-end的合并簡寫形式跛蛋，grid-row屬性是grid-row-start屬性和grid-row-end的合并簡寫形式悦析。
3.grid-area 屬性
grid-area屬性指定項(xiàng)目放在哪一個(gè)區(qū)域。
4.justify-self
單個(gè)網(wǎng)格元素的水平對齊方式
5.align-self
單個(gè)網(wǎng)格的垂直對齊方式
6.place-self
justify-self和align-self的縮寫
（四）亭螟、grid骰子練習(xí)
1.方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 100px;
height: 100px;
border: 1px black solid;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
place-items: center center;
}
#box1 div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
}
#box1 div:nth-child(1) {
/* 兩個(gè)方向的起始線 2 2 ，和結(jié)束線 3 3 */
grid-area: 2 / 2 / 3 / 3;
}
#box2 {
width: 100px;
height: 100px;
border: 1px black solid;
margin-top: 10px;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
place-items: center center;
}
#box2 div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
}
#box2 div:nth-child(2) {
grid-area: 3 / 3 / 4 / 4;
}
#box3 {
width: 100px;
height: 100px;
border: 1px black solid;
margin-top: 10px;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
place-items: center center;
}
#box3 div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
}
#box3 div:nth-child(2) {
grid-area: 2 / 2 / 3 / 3;
}
#box3 div:nth-child(3) {
grid-area: 3 / 3 / 4 / 4;
}
#box4 {
width: 100px;
height: 100px;
border: 1px black solid;
margin-top: 10px;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
place-items: center center;
}
#box4 div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
}
#box4 div:nth-child(4) {
grid-area: 3 / 1 / 4 / 2;
}
#box4 div:nth-child(3) {
grid-area: 3 / 3 / 4 / 4;
}
#box4 div:nth-child(2) {
grid-area: 1 / 3 / 2 / 4;
}
#box5 {
width: 100px;
height: 100px;
border: 1px black solid;
margin-top: 10px;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
place-items: center center;
}
#box5 div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
}
#box5 div:nth-child(5) {
grid-area: 3 / 3 / 4 / 4;
}
#box5 div:nth-child(4) {
grid-area: 3 / 1 / 4 / 2;
}
#box5 div:nth-child(3) {
grid-area: 2 / 2 / 3 / 3;
}
#box5 div:nth-child(2) {
grid-area: 1 / 3 / 2 / 4;
}
#box6 {
width: 100px;
height: 100px;
border: 1px black solid;
margin-top: 10px;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
place-items: center center;
}
#box6 div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
}
#box6 div:nth-child(6) {
grid-area: 3 / 3 / 4 / 4;
}
#box6 div:nth-child(5) {
grid-area: 3 / 1 / 4 / 2;
}
#box6 div:nth-child(4) {
grid-area: 2 / 3 / 3 / 4;
}
#box6 div:nth-child(3) {
grid-area: 2 / 1 / 3 / 2;
}
#box6 div:nth-child(2) {
grid-area: 1 / 3 / 2 / 4;
}
</style>
</head>
<body>
<div id="box1">
<div></div>
</div>
<div id="box2">
<div></div>
<div></div>
</div>
<div id="box3">
<div></div>
<div></div>
<div></div>
</div>
<div id="box4">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="box5">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="box6">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
2.方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 100px;
height: 100px;
border: 1px black solid;
margin-top: 10px;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9"
;
}
#box1 div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
grid-area: a5;
}
#box2 {
width: 100px;
height: 100px;
border: 1px black solid;
margin-top: 10px;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9"
;
}
#box2 div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
}
#box2 div:nth-child(1) {
grid-area: a1;
}
#box2 div:nth-child(2) {
grid-area: a9;
}
#box3 {
width: 100px;
height: 100px;
border: 1px black solid;
margin-top: 10px;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9"
;
}
#box3 div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
}
#box3 div:nth-child(1) {
grid-area: a1;
}
#box3 div:nth-child(2) {
grid-area: a5;
}
#box3 div:nth-child(3) {
grid-area: a9;
}
/* ............. */
</style>
</head>
<body>
<div id="box1">
<div></div>
</div>
<div id="box2">
<div></div>
<div></div>
</div>
<div id="box3">
<div></div>
<div></div>
<div></div>
</div>
<div id="box4">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="box5">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="box6">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
