你怎么认识flex

1. 特点

语法简洁、 响应式布局

2. 模型

父容器的属性

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; 
   控制主轴上所有 flex 项目的对齐
   
align-items: flex-start | flex-end | center | baseline | stretch;

控制交叉轴上所有 flex 项目的对齐（有了这个属性不用再考虑父元素有多高top是多少了）
align-self - 控制交叉轴上的单个 flex 项目的对齐。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
 控制“多条主轴”的 flex 项目在交叉轴的对齐（要使得 align-content 生效，flex 容器的height要大于 flex 项目的可视内容。然后它会将所有的 flex 项目打包成一块之后再对齐剩下的空间）

设置子元素的属性有：

order: <integer>;
flex-grow: <number>;
flex-shrink: <number>;
flex-basis: <length> | <percentage> | auto | content;
flex: none | <flex-grow> <flex-shrink>? || <flex-basis>;
align-self: auto | flex-start | flex-end | center | baseline | stretch;