0726 弹性布局 grid布局

弹性布局

isplay: flex;

将一个标记变成弹性盒子 就在css中使用 display: flex;

变成弹性盒子以后里面的内容会按照主轴(左右水平方向)分布

flex-direction: column 会使主轴的左右方向变为侧轴(垂直上下)的方向(row 主轴 行 column 侧轴 列 )

如果子标记尺寸超过弹性盒子(父标记)的尺寸 弹性盒子(父标记)会压缩子标记

如果子标记尺寸超过弹性盒子(父标记)的尺寸可以用flex-wrap: wrap;让子标记换行

 justify-content 在主轴方向显示规则 属性值有:

 1. justify-content :space-around 每个子标记左右两边间距相同(并且两边的子标记到边框的距离等于子标记之间距离的一半)

  2.  justify-content :space-between 两端对齐 子标记之间间距相同

 3.  justify-content :space-evenly 不管是子标记之间还是和父标记边框之间的间距都相同