CSS伸缩盒布局总结分享

CSS伸缩盒布局

伸缩盒布局是一种弹性布局方式，通过添加flex属性给容器，指定子元素的布局方式，并通过其他属性对子元素进行更细致的控制，从而实现响应式的页面布局。

容器属性

以下是常用的伸缩盒容器属性：

		.container{
			display: flex; /*指定容器为伸缩盒*/
			flex-direction: row|row-reverse|column|column-reverse; /*子元素摆放方向*/
			flex-wrap: nowrap|wrap|wrap-reverse; /*是否换行*/
			justify-content: flex-start|flex-end|center|space-between|space-around; /*子元素在主轴上的对齐方式*/
			align-items: flex-start|flex-end|center|baseline|stretch; /*交叉轴上的对齐方式*/
			align-content: flex-start|flex-end|center|space-between|space-around|stretch; /*多根轴线的对齐方式*/
		}
	

子元素属性

以下是常用的伸缩盒子元素属性：

		.box{
			flex-grow: number; /*放大比例*/
			flex-shrink: number; /*缩小比例*/
			flex-basis: length|auto; /*分配空间前的基准值*/
			flex: none|auto|1|initial|inherit; /*分别表示不伸缩、自动、1、初始值、继承*/
			order: number; /*子元素排列顺序*/
			align-self: auto|flex-start|flex-end|center|baseline|stretch; /*子元素在交叉轴上的对齐方式*/
		}
	

示例

下面是一个简单的示例，实现了一个响应式的九宫格布局，当屏幕宽度缩小时，子元素自动转换成单列布局：