css中让控件占满剩余空间的方法

最新推荐文章于 2024-07-09 16:38:59 发布

YSoup

最新推荐文章于 2024-07-09 16:38:59 发布

阅读量5.1k

点赞数 3

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/deep_rooted/article/details/124534097

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

对于安卓开发来说，让控件占满剩余的空间是经常使用到的，例如郭霖的《第一行代码》里，就有这么一个例子：
在这里插入图片描述
在这个图中，发送按钮的宽度是刚好能够包裹住里面的内容，而输入框的宽度则是占满剩余的宽度，这种写法适配性非常好。
有点扯远了，我们下面来看看css中如何实现这种效果。

实现方法

对于css，实现这种效果其实很简单，使用flex布局即可。代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-direction: row;
        }

        .editText {
            flex-grow: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <input placeholder="请输入消息内容" class="editText" />
        <button class="btn">发送</button>
    </div>
</body>
</html>

关键就是利用了flex布局中的flex-grow属性。之前看到过有人说要想实现占满剩余空间可以用100%减去某某数值的写法，这种写法不是我想要的，因为我根本就不知道发送按钮的宽度。效果如下图：
在这里插入图片描述
这个是在谷歌浏览器打开的，其实写这篇文章，主要是因为以后可能要经常写小程序了，安卓原生开发不得不说正在走下坡路，h5才是永远的神。

YSoup

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
css中让控件占满剩余空间的方法

前言对于安卓开发来说，让控件占满剩余的空间是经常使用到的，例如郭霖的《第一行代码》里，就有这么一个例子：在这个图中，发送按钮的宽度是刚好能够包裹住里面的内容，而输入框的宽度则是占满剩余的宽度，这种写法适配性非常好。有点扯远了，我们下面来看看css中如何实现这种效果。实现方法对于css，实现这种效果其实很简单，使用flex布局即可。代码如下：<!DOCTYPE html><html><head> <style> .con
复制链接

扫一扫

专栏目录