flex下面有两个div,让其中一个div宽度不变

要在一个 Flex 容器中让其中一个的宽度固定,而另一个自适应宽度,你可以使用 Flex 布局的属性和值来实现。以下是实现的一种方式:

<div class="flex-container">
  <div class="fixed-width">固定宽度的内容</div>
  <div class="flexible-width">自适应宽度的内容</div>
</div>
.flex-container {
  display: flex;
}

.fixed-width {
  width: 200px; /* 设置固定宽度 */
}

.flexible-width {
  flex: 1; /* 设置弹性宽度 */
}

在上述代码中,我们创建了一个 Flex 容器(.flex-container),其中包含两个子元素

。第一个

具有 .fixed-width 类,我们在这里设置了一个固定的宽度(200px)。

第二个

具有 .flexible-width 类,我们为它设置了 flex: 1。这将使它自动填充剩余的可用空间,从而实现自适应宽度的效果。

通过这种方式,第一个

将保持固定的宽度,而第二个

将自动适应剩余的空间。

你可以根据需要调整固定宽度和自适应宽度的样式,以满足你的具体要求。

希望这个解决方案对你有所帮助!如果还有其他问题,请随时提问。

本条目发布于。属于软件分类,被贴了 标签。作者是

关于有个狸

2005年开始的一名站长,从事网站策划、运营,早期一批扎根阿里妈妈、Google Adsense的一员,目前司职前端与产品设计。

发表回复