flex:1; 与 flex:auto;

Posted 2021-03-21 xiaomi0610

在项目练习中，发现利用弹性布局方式为盒子设置相同的属性：

.main>.section{
    display: flex;
    height: 100px;
    margin: 4px 2px;
}
.main>.section>.col{
    background: #ff5555;
    flex: auto ;
    border-left: 1px solid #fff;
    box-sizing: border-box;
    text-align: center;
}

并不能使得每一行的盒子在主轴方向上平分弹性容器的尺寸（此处为宽度）：

 这是因为为元素设置的

div{
    flex: auto ;      
}

等同于

div{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

 flex-basis: auto;会使得盒子的宽度由盒子内容决定，要想使得宽度一致，并且当主轴方向存在剩余空间就统一扩大，空间不足则缩小，应该改变其值为：

div{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

或者更简便的写法：

div{
    flex: 1;
}

上述两者效果是一致的，得到结果如图：

 

 

 flex简写形式的表达含义

 

div{
    flex: none;
}
/* 等同于 */
div{
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

div{
    flex: auto;
}
/* 等同于 */
div{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

div{
    flex: 1; /* 非负数 */
}
/* 等同于 */
div{
    flex-grow: 1; /* 非负数 */
    flex-shrink: 1;
    flex-basis: 0%;
}

div{
    flex: 0%; /* 长度或百分比 */
}
/* 等同于 */
div{
    flex-grow: 1; 
    flex-shrink: 1;
    flex-basis: 0%; /* 长度或百分比 */
}

div{
    flex: 1 2; /* 两个非负数 */
}
/* 等同于 */
div{
    flex-grow: 1; /* 第一个非负数 */
    flex-shrink: 2; /* 第二个非负数 */
    flex-basis: 0%; 
}