弹性盒子(弹性布局)

display: 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 不管是子标记之间还是和父标记边框之间的间距都相同

        4.  justify-content :flex-start 靠左 无间距

        5.  justify-content :center 居中 无间距

      6.  justify-content :flex-end 靠右 无间距 且是整体靠右

align-items 决定的是侧轴的显示方式 会分成n等份 在每一份空间里置顶(flex-start)居中(center)或者靠下(flex-end)

align-items: flex-start;

align-content  决定的是侧轴的显示方式 不会等分空间 直接在父标记里置顶(flex-start)居中(center)或者靠下(flex-end)

align-content: center;

flex样式

flex: n; 让子标记按比例显示 写在子标记里

flex:0 0 300px 让其中一个子标记固定尺寸其他子标记按比例占据

如果主轴是水平方向的 那么300px占的是宽度

如果主轴是垂直方向(侧轴) 那么300px占的是高度

        .s1{
				/* 第一个先占300px 剩下的子标记按比例分配 */
				flex: 0 0 300px;
			}
			.s2{
				flex: 1;
			}
			.s3{
				flex: 2;
			}
			.s4{
				flex: 3;
			}