flex布局--主轴方向分别为水平和竖直

• 主轴方向为水平方向

div{
display:flex; //该div的子集是弹性盒子
width:200px;
background:pink;
justify-content:space-between; //使空白在盒子的两侧
}

<div>
    <span>这是span标签</span>
    <h4>这是h4标签</h4>
</div>

这里div是父级盒子，在div中有一个span标签和一个h4标签。span标签为行内样式，h4标签独占一行。

 结果如上图所示，由于父级div使用了flex布局：

1. h4标签并没有独占一行，而是与span标签一起排列在主轴方向。
2. 高度没有设置，默认为父级高度。
3. 由于主轴对齐方式justify-content:space-between,所以盒子分布在左右两侧。

• 主轴方向为竖直方向

div{
display:flex; //该div的子集是弹性盒子
width:200px;
background:pink;
justify-content:space-between; //使空白在盒子的两侧
flex-direction: column; //主轴方向是竖直方向
}

<div>
    <span>这是span标签</span>
    <h4>这是h4标签</h4>
</div>

 主轴方向为竖直方向并且设置了主轴的对齐方式：justify-content:space-between。盒子分布在上下两侧。