伸缩盒布局的相关属性用法详细介绍

@伸缩盒/弹性盒子Flexbox

伸缩盒相关属性的用法详解

伸缩盒的属性有：
容器区：

属性	值
display	flex;
flex-direction	row;column;
flex-wrap	nowrap;wrap;wrap-reserve
justify-content	flex-start;flex-end;center;space-between;space-around
align-items	flex-start;flex-end;center;baseline;stretch
align-content	flex-start;flex-end;center;space-between;space-around

• 设置盒子为伸缩盒：display:flex;

• 设置伸缩盒的主轴方向：flex-direction

     默认x轴为主轴（main axis），即flex-direction:row;
     设置交叉轴（cross axis）y轴为主轴，flex-direction:column;
  

• 设置伸缩盒是否换行：flex-wrap

     默认不换行，flex-wrap:nowrap;
     设置换行，flex-wrap:wrap;
     设置反转换行，flex-wrap:wrap-reserve;
  

• 设置伸缩盒主轴对齐方式：justify-content

    默认主轴起点对齐，justify-content:flex-start;
    设置主轴终点对齐，justify-content:flex-end;
    设置主轴居中对齐，justify-content:cencer;
    设置主轴上项目之间有空间，justify-content:space-between;
    设置主轴上项目周围有空间，justify-content:space-around;
  

• 设置伸缩盒交叉轴对齐方式（单行）：align-items

    子元素设置高度时，默认交叉轴起点对齐，align-items:flex-start;
    子元素未设置高度时，默认交叉轴拉伸对齐，align-items:stretch;
    设置交叉轴终点对齐，align-items:flex-end;
    设置交叉轴居中对齐，align-items:cencer;
    设置交叉轴基线对齐（文本对齐），align-items:baseline;
  

• 设置伸缩盒交叉轴对齐方式（多行）：align-content

    子元素设置高度时，默认交叉轴起点对齐，align-content:flex-start;
    子元素未设置高度时，默认交叉轴拉伸对齐，align-content:stretch;
    设置交叉轴终点对齐，align-content:flex-end;
    设置交叉轴居中对齐，align-content:cencer;
    设置主轴上项目之间有空间，align-content:space-between;
    设置主轴上项目周围有空间，align-content:space-around;
  

  注意：flex-flow是flex-direction和flex-wrap的速写
  子元素区
  |属性| 值 |
  |–|--|
  | flex | 数值（1、2、3…）;绝对值（100px、200px…） |