CSS 盒模型

1、自动居中均分剩余空间

 HTML 代码

<div class="r-parent">
    <div class="r-card">1</div>
    <div class="r-card">2</div>
    <div class="r-card">3</div>
</div>

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;
}

2、将子元素向两端停靠

CSS 代码

justify-content: space-between; /*左右子元素靠近两端*/