Flex 设置flex项第一个项固定大小第二个项根据剩余宽度铺满

如何设置flex项, 第一个项固定大小, 第二个项根据剩余宽度铺满？

要在Flex布局中设置第一个项目为固定大小，而第二个项目根据剩余宽度铺满，可以使用​flex-grow​, ​flex-shrink​和​flex-basis​属性。具体来说： 

1. 对于第一个Flex项目，设置一个固定的宽度（如​width​或​flex-basis​），并且确保​flex-grow​和​flex-shrink​设置为0，这样它就不会根据容器大小的变化而伸缩。 
2. 对于第二个Flex项目，使用​flex-grow: 1;​使其能够占据所有剩余空间。通常，您不需要为第二个项目设置​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; /* 可选，因为已经设置了width */
}
.flex-item.fill-rest {
    flex-grow: 1; /* 填充所有剩余空间 */
    /* 不需要设置flex-shrink和flex-basis，除非有特定需求 */
}

说明

• 在这个例子中，​.fixed-size​ 类的Flex项目将保持100px的宽度，不论Flex容器的大小如何变化。
• ​.fill-res​t类的Flex项目则会占据剩余的所有可用空间。 
• 确保Flex容器（​.flex-container​）的宽度足以容纳固定宽度的项目和任何其他内容，否则可能会出现布局上的问题。