4、justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box { justify-content: flex-start | flex-end | center | space-between | space-around; }

flex-start flex-end center space-between space-around

flex-start(默认值):左对齐

1
2
3
4

flex-end:右对齐

1
2
3
4

center: 居中

1
2
3
4

space-between:两端对齐,项目之间的间隔都相等。

1
2
3
4

space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

1
2
3
4