CSS盒模型

效果图

HTML 代码

CSS 代码

/* 父元素样式 */
.r-parent {
margin: 50px auto;
border: 1px solid red;
display: flex; /* 开启盒模型 */
flex-wrap: wrap; /* 自动换行 */
justify-content: space-around; /* 居中均分（左右间距均分） */
}
/* 子元素样式 */
.r-card {
border: 1px solid;
width: 100px;
height: 100px;
}


display: flex; /*开启盒模型*/
flex-wrap: wrap; /*自动换行*/
justify-content: space-around; /*居中均分（左右间距均分）*/
justify-content: space-between; /*向两端停靠*/