弹性盒子布局 简装版 display: flex

html

<div id="box">
  <div>11</div>
  <div>22</div>
  <div>33</div>
</div>

css

#box {
  display: flex; // -----设为弹性盒子布局
  justify-content: center; // -----设置布局方式（水平）
  align-items: center; // -----设置布局方式（垂直）
  flex-direction： row; // -----排版方式 column
  background: #eee;
  width: 500px;
}

#box>div {
  height: 40px;
  line-height: 40px;
  border: 1px solid #8bc34a;
}

justify-content: 用于设置弹性盒子元素在 横轴 上的对齐方式
align-items：定义flex子项在flex容器的当前行的 纵轴 上的对齐方式。

justify-content: center;

justify-content: flex-end;

justify-content: space-around;

justify-content: space-between;