一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。
学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.flex_box {
width: 400px;
height: 400px;
background: pink;
display: flex;
/*flex-direction: column-reverse;*/
/*flex-wrap: wrap;*/
justify-content: space-between;
}
.flex_box div {
width: 60px;
height: 100px;
background: paleturquoise;
color: #FFFFFF;
font-size: 30px;
}
</style>
<body>
<div class="flex_box">
<div class="dv1">1</div>
<div class="dv2">2</div>
<div class="dv3">3</div>
<div class="dv4">4</div>
</div>
</body>
<script>
// 容器:需要添加弹性布局的父元素
// 项目:是弹性布局容器中的每一个子元素称为项目
// 作为父容器的6大属性
// 1.flex-direction 属性决定主轴方向(即项目的排列方向)
// row(默认值)主轴为水平方向,起点在左端
// row-reverse主轴为水平方向,起点在右端
// column主轴为垂直方向,起点在上沿
// column-reverse主轴为垂直方向,起点在下沿
// 2.flex-wrap属性定义，如果一条轴线排不下，如何换行。
// nowrap(默认)不换行，当容器宽度不够时，每个项目会被挤压宽度
// wrap换行，并且第一行在容器最上方
// wrap-reverse换行，并且第一行在容器最下方
// 3.flex-flow是flex-direction和flex-direction的缩写形式，默认值为flex-flow：row wrap;
// 4.justify-content属性定义了项目在主轴上的对齐方式。
// flex-start（默认值）： 项目位于主轴起点。
// flex-end：项目位于主轴终点。
// center:居中
// space-between：两端对齐，项目之间的间隔都相等。(开头和最后的项目，与父容器边缘没有间隔)(两端没有空隙)
// space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目，与父容器边缘有一定的间隔)
// (两端空隙是中间的一半)
// 5.align-items属性定义项目在交叉轴上如何对齐。
// flex-start：交叉轴的起点对齐。
// flex-end：：交叉轴的终点对齐。
// center:：交叉轴的中点对齐。
// baseline: 项目的第一行文字的基线对齐。
// stretch（默认值）：如果项目未设置高度或设为，将占满整个容器的高度。
</script>
</html>
谢谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕
专栏推荐
推荐一下自己的专栏，欢迎大家收藏关注😊~
