一、Flex布局
1.布局原理
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex 项目（flex item），简称"项目"。
当我们为父盒子设为 flex 布局以后，子元素的float、clear和 vertical-align属性将失效。
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局=flex布局
总结flex布局原理： 就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
2. flex布局父项常见属性
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
3.align-content 和align-items区别
align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸
align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找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.折行显示，默认不折行
flex-wrap: wrap;
3.复合写法 ,中间空格隔开
flex-flow: column wrap;
4.主轴子项排列
justify-content 属性（水平）对齐弹性容器的项目，当项目不占用主轴上所有可用空间时。*/
justify-content: space-around;
flex-wrap: wrap;
/* 5.子项对齐方式 */
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>
image.png
4.flex布局子项属性
order：改变某一个flex子项的位置，默认值是0
flex-grow：扩展flex子项所占据的宽度
flex-shrink：当flex容器空间不足的时候，单个元素的收缩比例，默认是1
flex-basis：定义了在分配剩余空间之前元素的默认大小
flex：是flex-grow，flex-shrink，flex-basis的缩写
align-self：控制单独某一个flex子项的垂直对齐方式
二、flex骰子练习
<!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>
image.png
三、grid布局
(一)、概念
1.网格布局（Grid）是最强大的 CSS 布局方案。
2.它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
3.Grid 布局与 Flex 布局 有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
4.Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
（二）、容器属性
1.grid-template-columns 属性、 grid-template-rows 属性
容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
2.repeat()
有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用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属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。
- grid-template-areas 属性
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
5.justify-items 属性，align-items 属性，place-items 属性
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。
6.justify-content 属性，align-content 属性，place-content 属性
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。
(三)、子项属性
1.grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性
项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
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属性指定项目放在哪一个区域。
4.justify-self
单个网格元素的水平对齐方式
5.align-self
单个网格的垂直对齐方式
6.place-self
justify-self和align-self的缩写
（四）、grid骰子练习
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) {
/* 两个方向的起始线 2 2 ，和结束线 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>
image.png
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>
image.png
