flex布局

flex-direction

• row

• row-reverse

• column

• column-reverse

justify-content

• start

• end

• center

• space-between

• space-around

• space-evenly (所有间隔相等，包含容器)

align-items

• flex-start

• flex-end

• center

• stretch(未给子元素设置高度,将撑满容器)

• stretch (给子元素设置了高度，则按照设置高度展示)

flex-wrap

• wrap

• nowrap

• wrap-reverse

align-content

• flex-start

• flex-end

• center

• stretch (子元素未设置高度)

• stretch (子元素已设置高度)

• space-between

• space-around

子元素属性

• order： 定义子元素的排序

• align-self: 子元素自身的align属性

• flex: flex-grow 、flex-shrink、flex-basis简写

flex-grow：按容器剩余空间的比例方法元素，将容器填充满，默认值为1 flex-shrink：按照被挤压空间的比例缩小元素 默认值为1 flex-basis：元素初始大小，默认auto