flex布局項(xiàng)目屬性

1. 項(xiàng)目整體伸縮屬性

flex-grow
- 允許放大
flex-shrink
- 允許收縮
flex-basis
- 設(shè)置item在主軸上的大小(覆蓋width屬性，但會(huì)被 min-width 和 max-width 屬性覆蓋)

以上屬性簡(jiǎn)寫：
flex: 放大因子收縮因子大小；
例：flex: 2 2 10rem;
默認(rèn)值：flex: 0 1 auto; (initial)
1 1 auto = auto
0 0 auto = none

默認(rèn)效果

flex-grow

當(dāng)容器寬度<=item寬度之和時(shí)，每個(gè)item寬度一樣；
當(dāng)容器寬度足夠，即大于item寬度之和時(shí)，item按照flex grow factor進(jìn)行放大
例：flex-grow: 1;
變化如下

CSS

   .container>.item {
            padding: 1rem;
            background-color: lightsteelblue;
            border: 1px solid black;
            flex-basis: 10rem;
        }
        .container>.item:first-of-type {
            flex-grow: 1;
        }
        .container>.item:nth-of-type(2) {
            flex-grow: 2;
        }
        .container>.item:nth-of-type(3) {
            flex-grow: 3;
        }
        .container>.item:last-of-type {
            flex-grow: 4;
        }

flex-shrink

當(dāng)容器寬度足夠容納所有項(xiàng)目時(shí), 不會(huì)收縮
當(dāng)容器寬度不夠夠容納所有項(xiàng)目時(shí)從收縮因子最大的開始收縮

CSS

        .container>.item {
            padding: 1rem;
            background-color: lightsteelblue;
            border: 1px solid black;
            flex-basis: 10rem;
        }
        .container>.item:first-of-type {
            flex-shrink: 1;
        }
        .container>.item:nth-of-type(2) {
            flex-shrink: 2;
        }
        .container>.item:nth-of-type(3) {
            flex-shrink: 3;
        }
        .container>.item:last-of-type {
            flex-shrink: 4;
        }

當(dāng)容器寬度足夠容納所有項(xiàng)目時(shí)：

當(dāng)容器寬度不夠時(shí)開始收縮：

下圖中，容器總width為 366 < 400, 此時(shí)子項(xiàng)目大概寬度:
item1-85, item2-89, item3-92, item4-96
注：容器寬度過小時(shí)，會(huì)從item3-item1開始逐漸妥協(xié)，即item3-item1寬度逐漸與item4相等，最后每個(gè)item寬度相等

2. 單獨(dú)設(shè)置某個(gè)項(xiàng)目 align-self

       .container>.item:nth-of-type(3) {
            flex-grow: 3;
            align-self: flex-start;
        }

3. flex項(xiàng)目支持定位，不支持浮動(dòng)

       .container>.item:nth-of-type(3) {
            flex-grow: 3;
            align-self: flex-start;
            position: absolute;
            background-color: blanchedalmond;
            left: 5rem;
            top: 5rem;
        }

4. 改變flex項(xiàng)目順序

order: value;
數(shù)字大靠后排列，數(shù)字小靠前排列

        .container>.item:nth-of-type(3) {
            flex-grow: 3;
            order: 20
        }
        .container>.item:last-of-type {
            flex-grow: 4;
            order: -1;
        }