Flex弹性盒子的项目属性

1、align-self 项目对齐方式

（1）align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式。

（2）取值

• auto（默认值）：和父元素align-self的值一致，具有继承性
• flex-start：该项目顶端对齐
• flex-end：该项目底部对齐
• center：竖直方向上居中对齐
• baseline：item第一行文字的底部对齐
• stretch：当item未设置高度时，item将和容器等高对齐

（3）上机实例

      .box{
            width: 500px;
            height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ccc;
        }
        .box .box1{
            width: 100px;
            height: 100px;
        }
        .box .box1:nth-of-type(1){
            background-color: pink;
        }
        .box .box1:nth-of-type(2){
            background-color: skyblue;
             align-self: flex-start; 该项目居上排列 
            /* align-self: flex-end; 该项目居下排列 */
            /* align-self: center; 该项目居中排列 */
            /* align-self: auto; 默认值 继承父元素 */
            /* align-self: baseline;与第一个项目的第一行文字对齐 */
        }
        .box .box1:nth-of-type(3){
            background-color: orange;
        }

（4）运行效果

 

 

2、order 项目排列方式

（1）order属性设置项目排序的位置，默认值为0，数值越小越靠前，可以为正，可以为负

（2）上机实例

  .box .box1{
            width: 100px;
            height: 100px;
        }
        .box .box1:nth-of-type(1){
            background-color: pink;
            order: 0;
        }
        .box .box1:nth-of-type(2){
            background-color: skyblue;
            order: -8;
        }
        .box .box1:nth-of-type(3){
            background-color: orange;
            order: 5;
        }

（3）运行结果

 

 

3、flex-grow 项目大小比例

（1）flex-group属性用来

控制当前项目是否放大显示。默认值为0

（2）上机实例

  .box .box1{
            width: 100px;
            height: 100px;
        }
        .box .box1:nth-of-type(1){
            background-color: pink;
        }
        .box .box1:nth-of-type(2){
            flex-grow: 2;
        }
        .box .box1:nth-of-type(3){
            background-color: orange;
            flex-grow: 1;
        }

（3）运行效果

 4、flex-shrink 项目缩小比例

（1）flex-shrink属性表示元素的缩小比例。默认值为1，如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0，则空间不足时该项目也不缩小。

（2）上机实例

.box .box1{
            width: 200px;
            height: 200px;
        }
        .box .box1:nth-of-type(1){
            background-color: pink;
            flex-shrink: 2;
        }
        .box .box1:nth-of-type(2){
            background-color: skyblue;
            flex-shrink: 0;
        }
        .box .box1:nth-of-type(3){
            background-color: orange;
            flex-shrink: 1;
        }

（3）运行效果

 

5、flex 简写

（1） flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto；

（2）取值

•  auto：等价于  1 1 auto。也就是允许增长，允许缩小，宽度为自动。
•  none：等价于  0 0 auto。也就是不允许增长，不允许缩小，宽度为自动。
• 非负数字：这个数字表示的是 flex-grow的值，   flex-shrink为1，表示允许缩小。

(3）上机实例

.box .box1{
            width: 200px;
            height: 200px;
        }
        .box .box1:nth-of-type(1){
            background-color: pink;
            flex: 1;
            /* flex:0 1 auto;默认值 */
        }
        .box .box1:nth-of-type(2){
            background-color: skyblue;
            /* flex: auto; 等价于  1 1 auto。也就是允许增长，允许缩小，宽度为自动。 */
        }
        .box .box1:nth-of-type(3){
            background-color: orange;
            /* flex: none; 等价于  0 0 auto。也就是不允许增长，不允许缩小，宽度为自动。 */
        }

 （4）运行效果