CSS3 - flex属性

叁歲伎倆 2021-09-19 18:52 271阅读 0赞

### 前言 ###

CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。  
这是一个简写属性，用来设置

*  flex-grow
 *  flex-shrink
 *  flex-basis

`flex-grow` 属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。  
    `flex-shrink` 属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 为0时，即如果存在剩余空间，也不放大。  
    `flex-basis` 属性：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

### 常见情况 ###

当 flex 取值为 none，则计算值为 0 0 auto，如下是等同的：

.item {flex: none;}
    .item {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
    }

当 flex 取值为 auto，则计算值为 1 1 auto，如下是等同的：

.item {flex: auto;}
    .item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
    }

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

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

当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：

.item-1 {flex: 0%;}
    .item-1 {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0%;
    }
    .item-2 {flex: 24px;}
    .item-1 {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 24px;
    }

**注意**：flex数字的大小控制统同级元素且使用flex的倍数关系  
     **注意**：flex数字的元素，子元素可以使用width，height 100%来获取宽高