Flex弹性布局小结

版权声明： https://blog.csdn.net/yangshuolll/article/details/83552396

/* 取消整默认的外边距和内边距， 将width = border + padding + 内容的  width， height = border + padding + 内容的 height */
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

点击我见box-sizing的详细解释

display:flex;  /*定义flex弹性盒子模型*/
flex-direction:row | row-reverse | column | column-reverse; /* 定义主轴的方向，元素按照主轴的方向排列， 分别是从左往右，从右往左，从上往下，从下往上*/
flex-wrap: nowrap | wrap | wrap-reverse;   /*定义侧轴的方向，分别是不拆行，已默认的方向拆行或者拆列，默认的反方向拆行或者拆列*/
/*
flex-flow 是flex-direction 和 flex-flow的合成
order 改变伸缩项的位置，所有伸缩项默认是0， 如果其中一个伸缩项为order为1，它就会跑到最后面
justify-content 控制伸缩项在主轴的展现方式 flex-start，flex-end， center， space-between， space-around
align-items 控制侧轴的展现方式 strech flex-start flex-end baseline center（控制一行元素中的伸缩项的展现方式）
align-self 控制单个伸缩项  strech flex-start flex-end baseline center
align-content 控制伸缩项所组成的行列在侧轴的展现方式 flex-start，flex-end， center， space-between， space-around
flex-grow 控制伸缩项在伸缩行中的伸展程度
flex-shrink 控制伸缩项在伸缩行中的收缩的程度
*/