CS3属性之弹性布局

弹性布局

添加在父元素
  默认状态下，交叉轴的宽度或者高度会铺满；但是如果定义了交叉轴的对齐方式，宽度或者高度会被内容撑开

1. 定义弹性盒：display:flex;
2. 确定主轴方向:
   flex-direction:row（左右–x轴）/column（上下–y轴） reverse反向
   flex-direction：column-reverse / row-reverse
3. 主轴对齐方式：
   justify-content:center;        居中对齐
   justify-content: flex-end;       主轴结束对齐（横向–右边，纵向–底端）
   justify-content: flex-start;      主轴开始对齐（横向–左边，纵向–顶端）
   justify-content: space-between;   两端对齐（与边框没有边距）
   justify-content: space-around;   两端对齐（与边框之间有间距）
4. 侧轴(交叉轴)的对齐方式
   不换行：
     align-items:center;     居中
     align-items: flex-start;   侧轴开始对齐（纵向–顶部，横向–左边）
     align-items: flex-end;    侧轴结束对齐（纵向–底部，横向–右边）
   换行：
     align-content: space-between;     在左边，两行分开，分别置于顶部和底部，只有两行之间有距离
     align-content: space-around;     在左边，两行分开，分别于上下有距离，两行之间也有距离
     align-content: flex-start;      一起在顶部（以row为主轴）
     align-content: flex-end;       一起在底部（以row为主轴）
     align-content: center;       多行挨一起，一起居中
     flex-wrap:nowrap / wrap       是否换行（不换行/换行）

添加在子元素
  order: -1      改变元素的先后顺序
    值越小，该子元素排行越前面（默认值为0）无单位
  align-self        单独改变侧轴的对齐方式
    侧轴（交叉轴）方向的对齐方式，只针对所给的该子元素
  flex-shrink:0      不收缩
  flex-grow        扩展  flex-grow：1
    占满剩余空间的比例，（取值0-1，0.5为占一半）
  flex-basis       基数（一定程度上代替宽度）
    当内容宽度小于width与flex-basis时，flex-basis生效
    当内容宽度大于width与flex-basis时，width生效
    当flex-basis<内容宽度<width，内容宽度生效