使用 justify-content首先需引入flex布局如
display: flex;
justify-content: space-between; //两边居中
justify-content:属性定义了项目在主轴上的对齐方式。(也就是X轴)
它可取5个值:
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。