弹性盒子布局 简装版 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;