本文介绍了在VisualStudioCode中使用Flex布局进行HTML设计的方法，探讨了flex-direction、justify-content和align-items等关键属性，以及它们如何影响元素在主轴和交叉轴上的排列方式。通过示例展示了不同属性设置下的排列效果，如居中、两端对齐、换行等。
首先我们学习flex用到的软件是Visual Studio Code，然后创建一个文件夹 创建html
容器属性:
运行结果: 没有任何样式
之前我们移动都需要用float(包括左浮动，右浮动)，现在学了flex,直接写 display: flex
例如：
运行结果就是：
注：这个div是容器
Flex的容器属性：
一、决定主轴的方向（项目的排列方向）
- row：横向从左到右排列（左对齐），默认的排列方式
- row-reverse：反转横向排列（右对齐），从后往前排，最后一项排在最前面
- column：纵向排列
- column-reverse：反转纵向排列，从后王前排，最后一项排在上面
1.flex-direction：row
和之前一样，没有什么变化（默认排列）
2.flex-direction：row-reverse
运行结果：反序列的，第一个在最后面
3.flex-direction：column
运行结果：
4.flex-direction：column-reverse
运行结果：从后往前
5.justify-content -main-轴-水平布局
如果用这个justify-content的时候，要先把flex-direction改成默认:flex-direction:row
justify-content:center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100%;
height: 600px;
border: 1px solid black;
display: flex;
flex-direction:row;
justify-content:center;
}
.box>div{
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
<div>第1个子元素</div>
<div>第2个子元素</div>
<div>第3个子元素</div>
</div>
</body>
</html>
运行结果：都居中了
6.justify-content:flex-end
运行结果：正序，靠右
7.justify-content:flex-end
运行结果：两端对齐
8.justify-content: space-around
运行结果：两端都对齐了，第二块第三块的距离是两端的2倍
9.justify-content: space-evenly
运行结果：距离都相等
10.align-items - cross轴-垂直布局
- stretch：默认值，如果项目未设置高度过auto，子元素会被拉伸以适应容器
- flex-start：元素位于容器开头
- flex-end：元素位于容器结尾
- center：元素位于容器中心
- baseline：元素位于容器的基线上
- 使用这个之前要先把flex-direction调成纵向:flex-direction：column
align-items:center
运行结果;
11.align-items:flex-end
运行结果：
12. align-items:flex-end
使用这个之前要先把flex-direction调成默认 flex-direction：row
在div里加上高度
运行结果：
13.align-items:flex-start
运行结果：
14.align-items:center
运行结果：
15. align-items:baseline
运行结果：
16. flex-wrap - 换行、换列
align-items:stretch（在div加上宽度）
运行结果：
17. flex-wrap:wrap
运行结果：默认值 
18. flex-wrap:wrap
运行结果：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
