css - Flex 自适应剩余宽度?
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .container { display: flex; gap: 1rem; padding: 1rem; background-color: red; color: white; } .box { background-color: blue; padding: 1rem; } .fx{ width: 300px; } </style> </head> <body> <div class="container"> <div class="box fill">Fill</div> <div class="box fx">Fixed</div> <div class="box fx">Fixed</div> <div class="box fx">Fixed</div> </div> </body></html>
Fixed盒子数量不是固定的Fixed盒子宽度是固定的Fill盒子只有一个Fill盒子宽度是动态的
如何让 Fill 填满剩余 Container 的宽度? 如下图
共有2个答案
.fill { flex: auto;}
这是一个关于 flexbox 的问题。在 flexbox 中，如果一个元素设置为 flex: 1，那么它会占据剩余的空间。在你的例子中，你想要 .fill 元素填满剩余的 .container 的宽度。你可以这样做：
.box.fill { flex: 1;}现在，.fill 元素将填满剩余的 .container 的宽度。请注意，这个方法将使得 .fill 元素成为 flex 子项中最后一个未设置宽度的元素。如果 .fill 元素不是最后一个子项，或者你希望所有 .fill 元素都填满剩余的宽度，你可能需要使用其他方法。
-
问题内容： 我有这个标题栏。 我需要searchBar来填补div中剩余的空白。我该怎么做？ 这是我的CSS 问题答案： 您可以使用CSS表格单元格实现此布局。 稍微修改您的HTML，如下所示： 只需删除两个元素周围的wrapper 元素即可。 应用以下CSS： 适用于并给它100％的宽度。 对于，，，适用。 对于，将宽度设置为90％，这将迫使所有其他元素计算出缩小以适合的宽度，搜索栏将展开以填充
-
问题内容： 如何使div填充剩余宽度？ 我如何才能填满其余部分？ 问题答案： 试试这样的事情： div自然会占用其容器的100％宽度，因此无需显式设置此宽度。通过添加与两侧div相同的左/右页边距，它自己的内容被强制置于它们之间。 请注意，“中间格”云 后 的HTML“正确的div”
-
问题内容： 我想设计一个带有横幅和iframe的网页。我希望iframe可以填满所有剩余的页面高度，并在浏览器调整大小时自动调整大小。是否可以仅使用CSS而无需编写Javascript代码来完成它？ 我尝试在iframe上进行设置，结果非常接近，但是iframe尝试填充整个页面高度，包括banner div元素的高度，因此我得到了不必要的垂直滚动条。这不是完美的。 更新说明 ：对不起，我没有很好地
-
问题内容： 我想要一个两列的div布局，其中每个可以具有可变的宽度，例如 我希望’view’div扩展到’tree’div填充所需空间后可用的整个宽度。 目前，我的“视图” div已调整为包含它的内容的大小，如果两个div都占据整个高度，那也会很好。 问题答案： 这个问题的解决其实很容易，但不是在 所有 明显。您必须触发一种称为“块格式设置上下文”（BFC）的东西，它以特定的方式与浮点数交互。 只
-
问题内容： 下面的代码将在元素下方创建一个箭头： 问题在于，我们必须指示链接宽度才能获得适当大小的箭头，因为我们无法以像素为单位指示边框宽度。 如何使响应三角形百分比为基础？ 问题答案： 您可以使用倾斜和旋转的伪元素在链接下创建一个 响应三角形 ： 三角形通过属性保持其长宽比。 如果您希望形状根据其内容来适应其大小，则可以删除类的宽度
-
我需要用div填充下的的剩余垂直空间。 我需要一个唯一的CSS解决方案。