首先介绍flex：flex是一种弹性盒子模型布局，它使用起来更加的简便。
想要实现工字型首先需要了解以下内容：
flex的启动：display：flex。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
我们定义七个img，随便插入一个图片，在<head>里面添加<style>，然后定义一个布局flex01，设置宽、高、背景色，启动flex布局。再定义img，设置宽、高、背景色。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局的使用</title>
<style >
.flex01{
width: 800px;
height: 400px;
background-color: green;
display: flex;
}
.flex01 img{
width: 100px;
height: 80px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="flex01">
<img src="/picture/jjc.jpg"></img>
<img src="/picture/jjc.jpg"></img>
<img src="/picture/jjc.jpg"></img>
<img src="/picture/jjc.jpg"></img>
<img src="/picture/jjc.jpg"></img>
<img src="/picture/jjc.jpg"></img>
<img src="/picture/jjc.jpg"></img>
</div>
</body>
</html>结果如下：
flex-direction：用于设置子元素在父元素当中的排列方式。
其属性有：
| 属性名 | 作用 |
| row | 默认值，按从左到右的顺序显示 |
| row-reverse | 与row相同，但是以相反的顺序显示 |
| column | 将项目垂直显示，按照从上到下的顺序 |
| column-reverse | 与column相同，但是以相反的顺序显示 |
flex-wrap：默认情况下，项目都排在一条线上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
tip：值得注意的是，换行操作是子容器的宽度大于父容器的宽度（即内容的宽度大于布局的跨度）时，才会换行，如果不定义换行，则会按比例缩小子容器的宽度来使之始终等于父容器的宽度。
其属性有：
| 属性名 | 作用 |
| nowrap | 默认值，不换行 |
| wrap | 换行，第一行在上方 |
| wrap-reverse | 换行，第一行在下方 |
flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
使用方法为：flex-flow：flex-direction属性 flex-wrap属性；
justify-content:属性定义了项目在主轴上的对齐方式。
其属性有：
| 属性名 | 作用 |
| flex-start | 默认值，左对齐 |
| flex-end | 默认值，右对齐 |
| center | 居中 |
| space-between | 两端对齐，项目之间的间隔都相等 |
| space-around | 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 |
为了显示的更加美观一些，我们使每个项目两侧的间隔相等。所以需要往flex01中添加代码
代码如下：
.flex01{
width: 800px;
height: 400px;
background-color: green;
display: flex;
justify-content: space-around;
}整体运行后的结果如图：
align-items属性：定义项目在交叉轴上如何对齐。
其属性有：
| 属性名 | 作用 |
| flex-start | 与交叉轴的起点对齐 |
| flex-end | 与交叉轴的终点对齐 |
| center | 与交叉轴的中点对齐 |
| baseline | 与 项目的第一行文字的基线对齐 |
| stretch | 如果项目未设置高度或设为auto，将占满整个容器的高度 |
因为我们需要完成工字型图标排列，所以我将工字型分为上中下三部分，两个布局容器（因为上下两部分是完全一样的），所以我们再定义一个布局flex02，并且使之居中对齐。
代码如下：
.flex02{
width: 800px;
height: 400px;
background-color: green;
display: flex;
justify-content: space-around;
align-items: center;
}定义完flex02后需要对flex02内的子容器进行定义（也就是中间图片）
代码如下：
.flex02{
width: 800px;
height: 400px;
background-color: green;
display: flex;
justify-content: space-around;
align-items: center;
}
.flex02 img{
width: 100px;
height: 80px;
background-color: yellow;
}此时，将布局与定义的七个图标联系到一块，然后再修改布局的容器宽度和高度，不然会太大，修改布局高度为：80px，宽度为100px。得到最终代码
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局的使用</title>
<style >
.flex01{
width: 400px;
height: 100px;
background-color: green;
display: flex;
align-items: center;
justify-content: space-around;
}
.flex01 img{
width: 100px;
height: 80px;
background-color: yellow;
}
.flex02{
width: 400px;
height: 100px;
background-color: green;
display: flex;
justify-content: space-around;
align-items: center;
}
.flex02 img{
width: 100px;
height: 80px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="flex01">
<img src="/picture/jjc.jpg"></img>
<img src="/picture/jjc.jpg"></img>
<img src="/picture/jjc.jpg"></img>
</div>
<div class="flex02">
<img src="/picture/jjc.jpg"></img>
</div>
<div class="flex01">
<img src="/picture/jjc.jpg"></img>
<img src="/picture/jjc.jpg"></img>
<img src="/picture/jjc.jpg"></img>
</div>
</body>
</html>运行结果如图：
这就是本次全部内容了，如有问题可以留言评论，看到回会的。
1950
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
