css让控件占满剩余宽度

原创已于 2023-06-26 15:15:38 修改 · 2.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端 #javascript

于 2023-04-20 09:40:49 首次发布

Vue3.0 同时被 3 个专栏收录

14 篇文章

订阅专栏

JavaScript

7 篇文章

订阅专栏

CSS3

1 篇文章

订阅专栏

文章介绍了如何在移动端开发中，通过CSS3的Flex布局特性，使输入框自动占据剩余宽度，实现屏幕适配。主要涉及`display:flex`、`flex-direction`、`flex-grow`等属性，确保输入框在不同屏幕大小的设备上能自适应填充空间。

一、实现场景

在移动端开发过程中，需要使输入框的宽度占满剩余宽度，以达到适配不同屏幕大小的手机，这里不需要手动调整各自占屏幕的百分比。
在这里插入图片描述

二、代码实现

"display: flex"是CSS3中的一种布局属性，它可以用于控制元素在父容器内的排列方式。具体作用如下：

使子元素在父容器内按照一定的规则排列。通过设置"flex-direction"属性，可以控制子元素的排列方向（水平或垂直）。

控制子元素在父容器内的对齐方式。通过设置"justify-content"属性，可以控制子元素在主轴上的对齐方式；通过设置"align-items"属性，可以控制子元素在交叉轴上的对齐方式。

控制子元素之间的空白间隔。通过设置"gap"属性，可以控制子元素之间的间隔距离。

控制子元素的伸缩性。通过设置"flex-grow"和"flex-shrink"属性，可以控制子元素在父容器内的伸缩比例，以适应不同的屏幕大小。

使用"flex"布局可以使页面的排版更加灵活，适应不同的分辨率和设备。

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

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

<body>
    <div class="container">
        <input placeholder="请输入搜索内容" class="searchText" />
        <button class="btn">搜索</button>
    </div>
</body>
</html>