CSS flex 盒模型

效果图

一、居中均分

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

二、向两端停靠 且 均分

替换案例一中的 一行 CSS代码即可

justify-content: space-around; /* 居中均分（左右间距均分）*/

/*替换为：*/
justify-content: space-between; /*向两端停靠*/