×
  • 的CSS 柔性box–完整的初学者指南

  • 弹性项目的属性

    课程清单

    到目前为止,我们已经介绍了可在Flex容器上使用的所有属性。现在,我们将研究“弹性项目属性”。


    订购

    订购属性控制项目在flex容器中出现的顺序。

    同步
    
    /* Standard syntax */
    div#red {order: 2;}
    div#blue {order: 4;}
    div#green {order: 3;}
    div#yellow {order: 1;}
    
    /* Safari 6.1+ */
    div#red {-webkit-order: 2;}
    div#blue {-webkit-order: 4;}
    div#green {-webkit-order: 3;}
    div#yellow {-webkit-order: 1;}
    

    弹性成长

    弹性增长定义了必要时项目增长的能力。

    同步
    
    div:nth-of-type(1) {flex-grow: 1;}
    div:nth-of-type(2) {flex-grow: 3;}
    div:nth-of-type(3) {flex-grow: 1;}
    

    弹性收缩

    伸缩收缩定义了必要时项目收缩的能力。

    同步
    
    div:nth-of-type(2) {
      弯曲收缩: 3;
    }
    

    弹性基础

    弹性基础指定弹性项目的初始主要尺寸。

    同步
    
    div:nth-of-type(2) {
      弹性基础: 100px;
    }
    

    柔性

    柔性 is shorthand for 弹性成长, 弯曲收缩 and 弹性基础.

    同步
    
    #main div {
      -ms-flex: 1;
      柔性: 1;
    }
    
    /* IE 10 */
    #main div {
      -ms-flex: 1;
    }
    

    自我对齐

    Wrap up 柔性 item properties with the 自我调整 property which allows alignment of individual items.

    同步
    
    #myBlueDiv {
      自我调整: center;
    }
    
    弹性项目的属性
    .
    .
  • 启用通知    不用了,谢谢