Flex 設(shè)置flex項第一個項固定大小第二個項根據(jù)剩余寬度鋪滿

如何設(shè)置flex項, 第一個項固定大小, 第二個項根據(jù)剩余寬度鋪滿？

要在Flex布局中設(shè)置第一個項目為固定大小，而第二個項目根據(jù)剩余寬度鋪滿，可以使用?flex-grow?, ?flex-shrink?和?flex-basis?屬性。具體來說： 

1. 對于第一個Flex項目，設(shè)置一個固定的寬度（如?width?或?flex-basis?），并且確保?flex-grow?和?flex-shrink?設(shè)置為0，這樣它就不會根據(jù)容器大小的變化而伸縮。 
2. 對于第二個Flex項目，使用?flex-grow: 1;?使其能夠占據(jù)所有剩余空間。通常，您不需要為第二個項目設(shè)置?flex-shrink?或?flex-basis?，因為默認值通常就足夠。 

例子

<div class="flex-container">
    <div class="flex-item fixed-size">固定大小的項</div>
    <div class="flex-item fill-rest">填充剩余的項</div>
</div>

.flex-container {
    display: flex;
}
.flex-item.fixed-size {
    width: 100px; /* 或您想要的任何固定大小 */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto; /* 可選，因為已經(jīng)設(shè)置了width */
}
.flex-item.fill-rest {
    flex-grow: 1; /* 填充所有剩余空間 */
    /* 不需要設(shè)置flex-shrink和flex-basis，除非有特定需求 */
}

說明

• 在這個例子中，?.fixed-size? 類的Flex項目將保持100px的寬度，不論Flex容器的大小如何變化。
• ?.fill-res?t類的Flex項目則會占據(jù)剩余的所有可用空間。 
• 確保Flex容器（?.flex-container?）的寬度足以容納固定寬度的項目和任何其他內(nèi)容，否則可能會出現(xiàn)布局上的問題。