父级与子级

/父级相对，子级绝对/
position: relative;父
position: absolute;子
/父级/
display: flex;
Flex父容器完整补充属性（全常用）
一、flex-direction 主轴方向（扩展值）
默认横向  row ，控制子元素排列方向

1.  flex-direction: row; （默认）：从左到右横向排
2.  flex-direction: column; ：从上到下纵向排
3.  flex-direction: row-reverse; ：从右往左反向横向
4.  flex-direction: column-reverse; ：从下往上反向纵向

二、justify-content 全部取值（完整）

控制主轴对齐（row时水平、column时垂直）

1.  flex-start （默认）：全部靠主轴起点（左/上）
2.  center ：整体居中
3.  flex-end ：全部靠主轴终点（右/下）
4.  space-between ：两端贴边，中间空隙平分
5.  space-around ：每个子项两侧留白相等

三、align-items 单行子元素交叉轴对齐

控制垂直方向（row布局下）

flex-start ：靠顶部
   center ：垂直居中
   flex-end ：靠底部
4.   stretch （默认）：子元素高度自动撑满父容器

四、flex-wrap 换行控制（必用）

默认子元素会压缩不换行，超出容器时开启自动换行

1.  flex-wrap: nowrap; （默认）：不换行，挤压子元素
2.  flex-wrap: wrap; ：空间不足自动换行，从上到下排
3.  flex-wrap: wrap-reverse; ：自动换行，从下到上反向排列

五、align-content 多行整体垂直对齐（仅换行后生效）

只有设置  flex-wrap: wrap  有多行时才生效
stretch （默认）：多行均分高度撑满容器
   center ：多行整体垂直居中
   flex-start ：多行全部靠顶部
flex-end ：多行全部靠底部
  space-between ：首行贴顶、末行贴底，行间空隙均分
    space-around ：每行上下留白均等;
父写display:flex开启弹性；
flex-direction管横竖；
justify-content管左右；
align-items管上下；
子写flex:1自动平分宽度