初步了解

flex = flexible box的缩写，意为弹性布局，任何一个容器都可以指定为flex布局

    display: flex;

基本概念

采用flex布局的元素，称为flex容器。它的所有子元素自动称为容器成员。

容器的属性

flex-direction
justify-content
align-items
flex-wrap
align-content
flex-flow

1.flex-direction

flex-direction 属性定义容器要哪个方向上堆叠flex项目，其值有

默认为 row 水平堆叠容器成员（从左到右）
row-reverse 水平堆叠容器成员（但从右到左）
column 垂直堆叠容器成员（从上到下）
column-reverse 垂直堆叠容器成员（但从下到上）

2.justify-content

justify-content 用于对齐容器成员，其值有

flex-start 将容器成员在容器的开头对齐（默认）
center 将容器成员在容器的中心对齐
flex-end 将容器成员在容器的末端对齐
space-around 显示行之前，之间和之后带有空格的容器成员
space-between 显示行之间有空格的容器成员

3.align-items 用于垂直对齐容器成员，其值有

center 将容器成员在容器中间对齐
flex-start 将容器成员在容器的顶部对齐
flex-end 将容器成员在容器的底部对齐
stretch 拉伸容器成员以填充容器（如果项目未设置高度或设为auto，将占满整个容器的高度）
normal：在弹性布局中，效果和stretch一样
baseline 使容器成员基线对齐

4.align-content

align-content 决定了多行容器成员的对齐方式，用法与justify-content相似

stretch 与align-items的stretch类似，当容器成员有高度时，无效果
center 居中对齐
space-around 容器成员之间的距离相等，容器成员和容器顶部和容器底部之间的距离等于容器成员之间的距离的一半
space-evently 容器成员之间的距离相等，容器成员和容器顶部和容器底部之间的距离等于容器成员之间的距离
space-between 容器成员之间的距离相等，和容器顶部和容器底部的两端对齐
flex-start 和容器顶部对齐
flex-end 和容器底部对齐

5.flex-wrap

flex-wrap 决定了容器是多行还是单行

nowrap（默认）单行
wrap 多行
wrap-reverse 对比wrap，排列顺序相反

6.flex-flow

flex-flow 是flex-direction与flex-wrap的简写

当你使用这个属性的时候，你可以使用上诉俩个的属性值

容器成员的属性

order
flex-grow
flex-shrink
flex-basis
align-self
flex

1.order

order 属性规定容器成员的排列顺序

值必须为数字，默认为0，值越小排越前面

2.flex-grow

flex-grow 规定了某个容器成员相当于其他的容器成员将增长多少

可以设置为任意非父数字（小数，整数 0），默认为0，只有当容器有剩余空间时才会生效

3.flex-shrink

flex-shrink 规定了某个容器成员相当于其他容器成员收缩多少

可以设置为任意非父数字（小数，整数 0），默认为1，只有当整体内容超过容器的空间才会生效

4.flex-basis

flex-basis 属性规定了容器成员的初始长度

默认为auto，可以设置具体的宽度数值

5.align-self

align-self 会覆盖容器的align-items属性所设置的默认对齐方式

6.flex

flex 是flex-grow || flex-shink||flex-basis的简写
可以指定1 2 3个值依次按照上述顺序！默认值为 0 1 auto

flex弹性布局