CSS中flex布局的项目属性

> 项目属性

序号	属性	描述
1	flex	项目的缩放比例与基准宽度
3	align-self	单个项目在交叉轴上的对齐方式
4	order	项目在主轴上排列顺序

flex属性：

      .container > .item {
        background-color: lightcyan;
        border: 1px solid #000;
        /* flex: flex-grow flex-shrink flex-basis */
        /* flex: 放大因子 收缩因子 项目在主轴上的基准宽度 */
        /* flex-basis: 项目占据的主轴宽度,优先级大于width,小于min-width */
        /* 默认值,禁止放大,但允许自动收缩,项目宽度自动计算 */
        flex: 0 1 auto;
        /* 默认值使用关键字简写 */ 
        flex: initial;
        /* 允许放大和收缩 */
        flex: 1 1 auto;
        /* 简写 */
        flex: auto;
        /* 禁止放大和收缩 */
        flex: 0 0 auto;
        /* 简写 */
        flex: none;
        /* 如果只有一个数字,省掉后面二个参数,表示的放大因子 */
        flex: 1;
        /* 等于  flex: 1 1 auto; */
        flex: 2;
        flex: 3;
      /* flex通常不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征 */
      }
      /* 写一个案例,要求第2个,第3个项目的宽度是第1个和第四个2倍 */
      /* 选择第一个和第四个项目 */
      .container > .item:first-of-type,
      .container > .item:last-of-type {
        flex: 1;
      }
      /* 选择第二个和第三个项目 */
      .container > .item:nth-of-type(2),
      .container > .item:nth-of-type(2) + * {
        flex: 2;
      }

align-self属性：

     /* 例如设置第2个项目与其它项目的对齐方式不一样 */
      .container > .item:nth-of-type(2) {
        align-self: stretch;
        align-self: flex-start;
        align-self: flex-end;
        align-self: center;
      }

   /* flex项目支持定位 */
      /* 定位父级 */
      .container {
        position: relative;
      }
      .container > .item:nth-of-type(2) {
        position: absolute;
        left: 3rem;
        top: 3rem;
        /* 通过定位,可以许多非常复杂,甚至匪夷所思的布局 */
      }

order属性：

 /* 显示顺序:默认按书写的源码顺序排列 */
      /* 默认序号越小越靠前,越大越靠后 */
      .container > .item:first-of-type {
        order: 5;
        background-color: yellow;
      }
      .container > .item:nth-of-type(2) {
        order: 2;
        background-color: lightgreen;
      }
      .container > .item:nth-of-type(3) {
        order: 0;
      }
      .container .item:last-of-type {
        /* 支持负值 */
        order: -1;
        background-color: #ccc;
      }