猫猫都能懂的flex布局源码 flex布局 flexbox属性列表属性介绍 value 用法 justify-con

源码

属性	介绍	value	用法
justify-content	沿X轴对齐	space-between	空格均分
		space-around	空间均分
		center	置中
		flex-start(default)	沿左边对齐
		flex-end	沿右边对齐

align-items	沿Y轴对齐	stretch(default)	拉伸
		center	置中
		flex-start	沿上边对齐
		flex-end	沿下边对齐

flex-direction	改变default排列方向	row(default)	正向-横
		row-reverse	反向-横
		column	正向-直
		column-reverse	反向--直

属性	介绍	value	用法
flex-wrap	换行	nowrap（default）	不换行
		wrap	正向换行
		wrap-reverse	反向换行

align-content	`当item多到需要换行的时候才会使用`，作用：沿Y轴对齐	stretch(default)	拉伸
		flex-start	沿上边对齐
		flex-end	沿下边对齐
		center	置中
		space-around	空间均分
		space-between	空格均分
order	从小到大的顺序排列，`方便元素交换`	0-数字	排序

属性	介绍	value
flex-grow	把多余的空间分给其他div	0-数字
flex-shrink	`把自己的空间分给其他div,自己越来越小`，当flex-shrink: 0时，若某个项目需要固定高度，就压缩其他的项目的空间	0-数字

    .box_3{
      background-color: wheat;
      flex-shrink: 0; /* 当某个项目需要固定高度，就压缩其他的项目的空间*/
    }

、