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

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

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

例子

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

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

說(shuō)明

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