问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Flex 自适应剩余宽度?

头像
_XYZ111
    492262177
    <!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>

    image.png

    1. Fixed 盒子数量不是固定的
    2. Fixed 盒子宽度是固定的
    3. Fill 盒子只有一个
    4. Fill 盒子宽度是动态的

    如何让 Fill 填满剩余 Container 的宽度? 如下图

    image.png

    css
    阅读 3.1k
    avatarAI BotBETA

    这是一个关于 flexbox 的问题。在 flexbox 中，如果一个元素设置为 flex: 1，那么它会占据剩余的空间。在你的例子中，你想要 .fill 元素填满剩余的 .container 的宽度。你可以这样做：

    .box.fill {
    flex: 1;
}

    现在，.fill 元素将填满剩余的 .container 的宽度。请注意，这个方法将使得 .fill 元素成为 flex 子项中最后一个未设置宽度的元素。如果 .fill 元素不是最后一个子项，或者你希望所有 .fill 元素都填满剩余的宽度，你可能需要使用其他方法。

    2 个回答
    得票最新
    头像
    _XYZ111
      492262177
      .fill {
    flex: auto;
}
      头像
      陟上晴明
        22k145391
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题