flex布局笔记

flex基本术语

一、flex container属性

Display：定义一个父容器，设置：display：flex | inline-flex；

Flex-direction：设置主轴方向（默认横轴），设置：row | row-reverse | column | column-reverse；

Flex-Wrap：设置容器子元素是否换行（默认不换行），设置：nowrap | wrap | wrap-reverse；

Flex-Flow：flex-direction与flex-wrap属性的简写形式，设置： |

Justify-Content:设置子元素在主轴上的分布形式（默认从开始位置排列）设置：flex-start | flex-end | center | space-between | space-around

Align-Items：定义子元素在交叉轴上的的排列对齐形式（默认拉伸）设置：flex-start | flex-end | center | baseline（子元素文字的baseline） | stretch(子元素拉伸至父元素大小）

Align-content：定义多行子元素在交叉轴上的分布形式（默认从开始位置排列）设置：flex-star | flex-end | center | space-between | space-around | stretch;

二、Flex Item属性

**Align-Self：**改变单个子元素的交叉对齐方式（默认继承）。设置：atuo | flex-start | flex-end | center | baseline | stretch；

**Order：**子元素显示的排列顺序，数值越小，排列越靠前（默认为0）设置：；

Flex-Grow、flex-shrink 缩放、flex-basis | auto权重大于width、flex