H5学习---html，css---弹性盒及属性

给父元素添加

1.display:flex/inline-flex;

	flex将对象作为弹性伸缩盒显示
	inline-flex将对象作为内联块弹性伸缩盒显示

2.flex-direction (主轴排列方向)

	row 默认，横向一行排列
  	row-reverse 反转横向排列
  	column 纵向排列
  	column-reverse 反转纵向排列

3.justify-content(主轴对齐方式)

	flex-start默认，顶端对齐
	flex-end末端对齐
	center居中对齐
	space-between两端对齐，中间自动分配
	space-around自动分配距离
	*默认元素在主轴上容不下不会换行，会被压缩

4.align-items(侧轴对齐方式)

	flex-start 侧轴起始边界
	flex-end 侧轴结束边界
	center 居中放置
	baseline 基线对齐
	stretch 默认值，项目被拉伸以适应容器

5.flex-wrap设置换行

	nowrap 容器为单行，该情况下子项可能会溢出容器
	wrap 容器为多行，子项内部会发生断行
	wrap-reverse 反转排列

6.align-content(行与行之间对齐方式)

	flex-start 没有行间距
	flex-end 底对齐没有行间距
	center 居中没有行间距
	space-between 两端对齐，中间自动分配
	space-around 自动分配距离
	stretch 默认值，项目被拉伸以适应容器

给子元素添加

1.align-self 灵活容器内被选中项目的对齐方式

	--可重写灵活容器的align-items属性
	auto 默认值，元素继承了它的父容器的align-items属性
	stretch	元素被拉伸以适应容器
	center 元素位于容器的中心
	flex-start 元素位于容器的开头
	flex-end 元素位于容器的结尾

2.order 排序优先级

	数字越大越往后排，默认为0，支持负数

3.flex-grow 项目的放大比例

	flex:1;--放大比例

4.flex-shrink 项目的缩小比例

	flex-shrink:0;元素不缩小

5.flex-basis 项目的长度

多列

column-count列数
column-gap列间距
column-rule列线条

break-inside: avoid;防止瀑布流将元素折断