css让控件占满剩余宽度

noeal

已于 2023-06-26 15:15:38 修改

阅读量2k

点赞数

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

本文链接：https://blog.csdn.net/noeal/article/details/130259168

版权

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

12 篇文章 1 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

CSS3

1 篇文章 0 订阅

订阅专栏

一、实现场景

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

二、代码实现

"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>