.wrap{
width: 600px;
height: 400px;
background-color: aquamarine;
display: flex;
/* 主轴的方向----子元素的排列方向 */
flex-direction: row;/* 默认值：水平向右，起点在左端 */
flex-direction: row-reverse;/* 默认值：水平向左，起点在右端 */
flex-direction: column;/* 垂直方向--从上往下，起点在上方 */
flex-direction: column-reverse;/* 垂直方向--从下往上，起点在下方 */
/* 设置主轴的对齐方式、弹性子元素在主轴方向的对齐方式 */
justify-content: flex-start;/* 默认值：主轴在顶端对齐 */
justify-content: flex-end;/*主轴在默端对齐 */
justify-content: center;/* 居中对齐、子元素位于弹性容器中心 */
justify-content: space-between;/* 两端对齐、子元素和子元素之间有空白、项目之件的间距相等 */
justify-content: space-around;/* 四周对齐、子元素之前、之间、之后都有空白、并且空白自行分配。项目和项目之间的间隔要比项目和边框之间的间距大一倍 */
justify-content: space-evenly;/* 平均分配、项目和项目之间、项目与边框之间、间距相等 */
}
.wrap div{
width: 100px;
height: 100px;
}
.wrap div:nth-child(1){
background-color: aqua;
}
.wrap div:nth-child(2){
background-color: rgb(52, 68, 68);
}
.wrap div:nth-child(3){
background-color: rgb(50, 214, 50);
}
</style>
</head>
<body>
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
