flex布局
- 父元素
display:flex;
flex-direction: row;
justify-content:space-between
補充
- flex-direction屬性決定主軸的方向(即項目的排列方向)。
row(默認值):主軸為水平方向,起點在左端。 row-reverse:主軸為水平方向,起點在右端。 column:主軸為垂直方向,起點在上沿。 column-reverse:主軸為垂直方向,起點在下沿。
- justify-content屬性
flex-start(默認值):左對齊 flex-end:右對齊 center: 居中 space-between:兩端對齊,項目之間的間隔都相等。 space-around:每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍。