什么是flex：1？

在css中，我們經(jīng)?？梢钥吹竭@樣的寫法：

.box {display: flex;
}.item {flex: 1;
}

這里的flex:1相當于flex: 1 1 0%，它是一個簡寫屬性，表示項目（flex item）在彈性容器（flex container）中如何伸縮。它相當于flex: 1 1 0%，包含了三個子屬性：

• flex-grow 定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
• flex-shrink 定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
• flex-basis 定義在分配多余空間之前，項目占據(jù)的主軸空間（main size），瀏覽器根據(jù)此屬性計算主軸是否有多余空間，默認值為 auto ，即項目本身的大小。

flex:1的作用

使用flex:1的作用是讓項目能夠自動填充剩余空間，實現(xiàn)自適應布局。例如，我們有一個水平排列的三個項目，它們的內(nèi)容長度不一樣，我們想讓它們平均占據(jù)一行的空間，就可以給它們都設(shè)置flex:1\

<div class="container"><div class="item">Hello</div><div class="item">World</div><div class="item">Flex</div>
</div>
.container {display: flex;
}.item {flex: 1;
}

這樣，無論容器的寬度如何變化，項目都會自動調(diào)整寬度，保持平均分配。

flex:1和其他值的區(qū)別

flex屬性還可以取其他值，例如：

• flex: none，相當于flex: 0 0 auto，表示項目不會伸縮，保持原始大小。
• flex: auto，相當于flex: 1 1 auto，表示項目會根據(jù)自身大小和剩余空間進行伸縮。
• flex: n（n為正整數(shù)），相當于flex: n 1 0%，表示項目的放大比例為n，其他值默認。

我們可以通過修改上面的例子來觀察不同值的效果：

<div class="container"><div class="item none">Hello</div><div class="item auto">World</div><div class="item one">Flex</div>
</div>
.container {display: flex;
}.item {border: 1px solid black;
}.none {flex: none;
}.auto {flex: auto;
}.one {flex: 1;
}

可以看到，none類的項目保持了原始大小，auto類的項目根據(jù)內(nèi)容長度進行了伸縮，one類的項目平分了剩余空間。

felx：1和flex：auto的區(qū)別

• flex-basis屬性定義了項目在分配多余空間之前，占據(jù)的主軸空間（main size）。
• flex:1相當于flex: 1 1 0%，表示項目的基準大小為0%，不考慮項目本身的大小，只根據(jù)剩余空間進行伸縮。
• flex:auto相當于flex: 1 1 auto，表示項目的基準大小為auto，即項目本身的大小，同時也會根據(jù)剩余空間進行伸縮。

這樣，當容器的大小變化時，兩者的表現(xiàn)也不同。

• 如果容器有足夠的空間，flex:1和flex:auto都會平分剩余空間，但是flex:auto會保持項目本身的最小寬度，而flex:1不會。
• 如果容器沒有足夠的空間，flex:1會優(yōu)先壓縮內(nèi)容，使得所有項目都能等分空間，而flex:auto會優(yōu)先保持內(nèi)容的完整性，擠壓其他項目的空間。

總結(jié)

flex:1是一個常用的CSS屬性，它可以讓項目在彈性容器中自動填充剩余空間。
它是一個簡寫屬性，包含了三個子屬性：flex-grow, flex-shrink, flex-basis。
它相當于flex: 1 1 0%，flex：1和flex：auto都會占滿剩余空間，我們可以根據(jù)合適的需求去選擇這兩種屬性。