九宫格（html css实现）---初识flex布局
记录flex属性并实现一个九宫格
flex属性
Flex 容器：
需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效
.container {
display: flex;
}//块状元素
.container {
inline-flex;
}//行内元素
块状元素
1.*** 独占一行：块元素会自动开始一个新行，并且占据整个容器的宽度。
2. 可以设置宽度与高度：你可以为块元素指定宽度（width）和高度（height）属性。
3. 可以包含其他块元素或行内元素：块元素可以包含其他块元素或者行内元素。
4. 垂直排列：默认情况下，多个块元素会垂直排列。***
e.g.
<div><p><h1><form><ul><ol><li>
行内元素
1.不会独占一行：行内元素不会自动开始新的一行，只占用必要的宽度。
2.不能设置宽度与高度：行内元素的宽度与高度通常由其内容决定，设置宽度与高度通常无效。
3.通常只包含数据和其他行内元素：行内元素通常不能包含块元素，但可以包含其他行内元素。
4.水平排列：多个行内元素会按照顺序水平排列，直到一行放不下才会换行。
<span>, <a>, <img>, <strong>, <em>, <input>, <label>
通过css实现块状元素和行内元素的转换
.container{
display:inline;
}//可以使块元素表现得像行内元素
.container{
display:block;
}//可以使行内元素表现得像块元素。
flex容器的五大属性
一. flex-direction: 决定主轴的方向(即项目的排列方向)
.container {
flex-direction: row;
}
1.row【默认值】主轴为水平方向，起点在左端。
2.row-reverse：主轴为水平方向，起点在右端
.container {
flex-direction: row-reverse;
}
3.column：主轴为垂直方向，起点在上沿
.container {
flex-direction: column ;
}
[正如上文所言，行内元素会水平排列]
4.column-reverse：主轴为垂直方向，起点在下沿
.container {
flex-direction: column-reverse;
}
二·. flex-wrap: 决定容器内项目是否可换行
【默认情况下，项目都排在主轴线上】
1.flex-wrap 可实现项目的换行【自动化】
2.wrap：项目主轴总尺寸超出容器时换行，第一行在上方
.container {
flex-wrap: wrap;
}
3.nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
.container {
flex-wrap: nowrap;
}
4.wrap-reverse：换行，第一行在下方
.container {
flex-wrap:wrap-reverse;
}
三· justify-content：定义了项目在主轴的对齐方式。
1.flex-start 左对齐 【默认值】
.container {
justify-content: flex-start;
}
【justify-content优先级<<<flex-wrap】
2.flex-end：右对齐
.container {
justify-content: flex-end;
}
3.center：居中
.container {
justify-content: center;
}
4.space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
.container {
justify-content: space-between;
}
5.space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。
.container {
justify-content: space-around;
}
四· align-items: 定义了项目在交叉轴上的对齐方式
e.g.建立在主轴为水平方向时测试，即 flex-direction: row
1.auto
默认值为 stretch 即如果项目未设置高度或者设为 auto，将占满整个容器的高度。【假设容器高度设置为 100px，而项目都没有设置高度的情况下，则项目的高度也为 100px。】
.container {
align-items: auto;
}
2.flex-start
.container {
align-items: flex-start;
}
【AP分布沿主轴方向（由flex-direction决定）递增，上对齐】
3.flex-end
.container {
align-items: flex-end;
}
【AP分布沿主轴方向（由flex-direction决定）递增，下对齐】
4.center
.container {
align-items: center;
}
【AP分布沿主轴方向（由flex-direction决定）递增，中线对齐】
5.baseline
.container {
align-items: baseline;
}
项目的第一行文字的基线对齐
五·align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用
当你 flex-wrap 设置为 nowrap 的时候，容器仅存在一根轴线，因为项目不会换行，就不会产生多条轴线。
当你 flex-wrap 设置为 wrap ** 的时候，容器可能会出现多条轴线**，这时候你就需要去设置多条轴线之间的对齐方式了。
e.g.建立在主轴为水平方向时测试，即 flex-direction: row, flex-wrap: wrap
1.flex-start：轴线全部在交叉轴上的起点对齐
.container {
align-content: flex-start;
}
2.flex-end：轴线全部在交叉轴上的终点对齐
.container {
align-content: flex-end;
}
3.center：轴线全部在交叉轴上的中间对齐
.container {
align-content: center;
}
4.space-between：轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙。
.container {
align-content: space-between;
}
5.space-around：每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍。
.container {
align-content: space-arround;
}
实现九宫格
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宫格</title>
<link rel="stylesheet" href="./九宫格.css">
</head>
<body>
<div class="container">
<span class="box1">1</span>
<span class="box2">2</span>
<span class="box3">3</span>
<span class="box1">1</span>
<span class="box2">2</span>
<span class="box3">3</span>
<span class="box1">1</span>
<span class="box2">2</span>
<span class="box3">3</span>
</div>
</body>
</html>
.container {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content:center;
padding: 0px;
margin: 0 auto;
width: 1000px;
height: 800px;
font-size: 50px;
font-weight: 100;
font-style: italic;
}
.box1 {
background-color:red;
height: 33.3%;
width: 30%;
border: 1px solid;
flex-direction: row;
}
.box2 {
background-color:yellow;
height: 33.3%;
width: 30%;
border: 1px solid;
flex-direction: row;
}
.box3 {
background-color: green;
height: 33.3%;
width: 30%;
border: 1px solid;
}
