目录
之前我们提到过，当我们创建一个元素时，相当于在HTML中创造了一个盒子，并且可以用适当的方法改变他的位置和其他属性，今天我们将会介绍一种更为便捷，有效的布局方式。
前面我们提到的传统的布局方式是通过HTML元素＋CSS样式来实现布局的，但是在实现某些特定的布局时比较困难麻烦，于是诞生了一个全新的布局方案——Flex布局。
1.Flex基本属性
（1）display
当我们在一个元素内创建了display：flex；或者display：inline flex属性时，一个普通的容器（盒子），就会变成Flex容器，前者是创建了一个块级元素，这使得在我们创建完成后它会占据一整行，而后者是一个行内块级元素，它不会占据一整行，而是会和别的元素在同一行。
（2）flex-direction
这个属性用于定义Flex容器内的元素的排列方向，它有四种可选值：
①row（默认值）
当设置为默认值时，主轴会沿着水平方向，从左到右排列项目，这是Flex默认的布局方式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello!</title>
<style>
yi {
background-color: aqua;
}
er {
background-color: blueviolet;
}
san {
background-color: rgb(48, 122, 187);
}
tanxingrongqi {
display: flex;
}
</style>
</head>
<body>
<tanxingrongqi>
<yi>
1
</yi>
<er>
2
</er>
<san>
3
</san>
</tanxingrongqi>
</body>
</html>
试着运行上面的代码，你会在浏览器看到这三个元素会沿着水平线从左向右排列元素
②row-reverse
主轴依旧是水平方向的但是内部元素的顺序是倒序的：
③column
当flex-direction设置为column时，主轴会变成垂直方向，从上到下排列项目
④column-reserve
和上面的一样，主轴方向没有改变，而内部元素的顺序发生颠倒
（3）flex-wrap
控制元素换行，当然，如果你的Flex容器的空间足够大，那么这个属性可能不会起什么效果。
①nowrap：不换行
②wrap：进行换行
③wrap-reserve：换行并且让元素倒叙
（4）justify-content
定义元素在主轴上的对齐方式，其中的主轴则是由“flex-direction”来定义的。
①flex-start：所有元素都想容器的起始位置对其，如果主轴是水平的，那就是向左对齐，如果主轴是垂直的，那就是向上对齐。
②flex-end：和上面的相反，如果主轴线是水平的，那就是向右对齐，如果主轴是垂直的，那就是向下对齐。
③center：在主轴线上居中对齐。
④space-between：在主轴线上均匀分布，第一个元素在容器的起始位置对齐，最后一个项目在容器的结束位置对齐。
⑤space-around：在主轴线上均匀分布，但是每个元素两侧的间隔相等。
⑥space-evenly：在主轴线上均匀分布，包括两端的两个元素。
通过上面三组图片可以比较明显的区分④，⑤和⑥的区别。
⑦stretch：如果元素没有设置尺寸，则会被拉伸来填满容器。
（5）align-items
align-items是在Flex中设置一个垂直于主轴的轴（主轴还是通过flex-direction来设置的）
①flex-start：在交叉轴的开始位置对齐，如果交叉轴是水平的，就把元素对齐到顶部，如果是垂直的，就对齐在左侧。
②flex-end：在交叉轴的结束位置对齐，如果交叉轴是水平的，就把元素对齐到底部，如果是垂直的，就对齐在右侧。
③center：居中对齐
现在我们已经学习了一些基本的元素，交叉轴就像是坐标系中的X和Y轴，你可以通过不断地调整这两个轴来把元素放大你想要的位置
2.自己制作一个简单的个人页面
通过上面的学习我们可以制作一个简单的个人简介页面来更好的介绍你自己，下面我们会制作一个简单的个人页面。
制作之前我们要准备一个空白的HTML以及一个你喜欢的头像，我们将会把他放在页面的头部：
第一步：我们先创建一个<toubulan>元素来形成我们页面的顶部的背景（在HTML中我们可以自己命名一个元素，但不要和某些有特殊含义的元素重名！），并且在HTML的头部添加内部CSS，为这个元素选上自己喜欢的背景颜色~~~
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello!</title>
<style>
toubulan {
background-color: aquamarine;
}
</style>
</head>
<body>
<toubulan>
</toubulan>
</body>
</html>
第二步：为这个页面的顶部栏设置一个合适的长度和宽度
<style>
toubulan {
background-color: aquamarine;
height: 160px;
width: 100%;
}
</style>第三步：我们现在把<toubulan>这个元素设置为Flex元素，并且在这个元素内添加一个你自己喜欢的那个头像（用我们之前说过的<img>元素）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello!</title>
<style>
toubulan {
background-color: aquamarine;
height: 160px;
width: 100%;
display: flex;
}
</style>
</head>
<body>
<toubulan>
<img src="666.jpg" width="100px" height="100px" >
</toubulan>
</body>
</html>
目前的步骤我们可以得到这样的效果：
第四步：我们要把这个头像居中
<style>
toubulan {
background-color: aquamarine;
height: 160px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>我们会得到这样的效果：
第五步：我们再创建一个大的Flex容器，并且在里面创建一写标题和内容
然后加一点小细节进行一些优化
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello!</title>
<style>
toubulan {
background-color: aquamarine;
height: 160px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
zhongjianbufen {
justify-content: center;
align-items: center;
background-color: rgb(255, 255, 255);
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<toubulan>
<img src="666.jpg" width="100px" height="100px" >
</toubulan>
<zhongjianbufen>
<h1>
大家好，这是我的个人页面！
</h1>
<p>我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！</p>
<p>我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！</p>
<p>我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！</p>
<p>我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！</p>
<p>我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！</p>
<p>我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！</p>
<p>我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！</p>
<p>我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！我是内容！</p>
</zhongjianbufen>
</body>
</html>
这样我们就能得到下面的效果：
当然，细心的你可能会发现页面的边框有一些小白边，那我们就可以对HTML文档中的<body>这个大标签进行更改
<body style="margin: 0;">这样白边就消失了(哦耶）
怎么样是不是很简单呢？哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈（已疯）
以上就是弹性盒子模型的相关内容:)
标签：flex,盒子,Flex,元素,弹性,HTML,内容,background,对齐 From： https://blog.csdn.net/2401_84944910/article/details/143577228