flex布局之设置主轴上的子元素排列方式一

justify-content: 是设置主轴上子元素的排列方式

以下案例将X轴设置为主轴

1、justify-content: flex-start;默认值是flex-start，从左到右展示

2、justify-content: flex-end;X轴是主轴，从尾部开始排列，但是子元素的顺序还是1,2,3,4

3、justify-content: center;让子元素居中对齐

4、justify-content: space-around;平分剩余空间，每个元素的左边距和右边距都一样

5、justify-content: space-between;先两边贴边，再平分剩余的空间

具体代码如下图所示：