input 设置flex:1 失效

最新推荐文章于 2025-06-30 17:47:07 发布

原创最新推荐文章于 2025-06-30 17:47:07 发布 · 4.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#input flex

博客指出在弹性盒子布局中，左右固定宽度，中间input设置flex:1时，其宽度比剩余长度大，导致验证码显示两行。原因是input兼容弹性盒子有问题，有默认最小长度。解决办法是给input加div父元素，div设flex:1，input设width:100%。

问题场景：

最外层的盒子设置为弹性盒子，左边和右边的写成固定宽度，中间的input输入框设置为flex:1，希望input的宽度是所剩下的长度，结果是它比所剩下的长度要大，验证码这三个字就显示成两行了

原因：input兼容弹性盒子有问题，它会有一个自己默认的最小长度，所以会导致验证码显示成两行

解决办法：我们可以给input输入框加一个div父元素，然后这个div设置flex:1,input设置width:100%；即可解决问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端wa

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

鸿蒙5.0版开发：ArkTS基础组件（TextInput）

m0_69424697的博客

09-21

1968

单行文本输入框组件。

ios部分机型出现select、input等控件点击后失效不可再次点击dug

qq_40665861的博客

11-12

1080

问题描述在昨天晚上的时候测试突然告诉我一个问题，在iphone 6s中select选择器在第一次点击后，其他的选择无法点击。整个手机都属于暂时性死机状态。问题分析当时首先对代码进行了排查，排除是逻辑方面的问题。经过多方面验证发现只有6s会出现，这是对兼容性进行了进一步的考虑。多方面兼容后，发现也不是兼容的问题。在一步步的实验中发现当点击后，需要滑动一次才可以继续点击，这个时候发现有可能是弹...

参与评论您还未登录，请先登录后发表或查看评论

【IE11】弹性布局flex:1失效

weifenhong的博客

07-14

3119

1. 方法一 flex-grow:1; 1. 方法二 flex:1 1 auto;

在flex布局下input设置flex:1失效的原因

weixin_43130844的博客

08-28

4632

由于input默认存在最小宽度，所以在父元素宽度太小的情况下input设置了flex:1会失效 <div style="width: 100px;display: felx;"> <input style="flex: 1;"> <button style="flex: 0 0 25px"></but...

CSS的flex布局的flex: 1；不生效

XD1060198931的博客

06-30

1018

解决：给其再设置min-height:0;（垂直方向）或 min-width: 0。设置 min-height: 0。是 flex-grow: 1。当 Flex 子元素设置。

flex:1失效问题

qq_35559000的博客

11-17

4810

解决flex布局内容超出盒子宽度问题

[css] flex:1失效问题

qq_14993591的博客

03-13

970

【代码】[css] flex:1失效问题。

解决flex:1失效的问题

jie_rookie的博客

12-01

4473

原因：文字过长，文字就会超出容器。

<lay-form-item :label="item.value" prop="item.key">  <lay-input v-model="modelForm.NamesTem[item.key]" style="flex: 1;"></lay-input> </lay-form-item>如何让的让输入框有光标

最新发布

07-08

### 方法 1：使用原生 JavaScript ```javascript // 通过ID获取输入框并聚焦 document.getElementById('yourInputId').focus(); ``` ### 方法 2：使用 jQuery（LayUI 内置） ```javascript layui.use('jquery', ...

``` <div style="width: 100%"> <el-form style="background: #fff;width: 100%" :model="receiptAddr" ref="queryParams" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="寄件人" style="margin-left: 50px;margin-top: 20px;width: 100% "> <el-select v-model="sendAddr.sender_address" @change="sendaddrChange" placeholder="请选择寄件人" style="flex:1;width: 100%"> <el-option :label="'请选择寄件人'" :value="0"></el-option> <el-option v-for="(item, index) in getShopAddr.addr" :key="index" :label="item" :value="index"></el-option> </el-select> </el-form-item> <div></div> <el-form-item label="姓名" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px;width: 100%"> <el-input v-model="sendAddr.sender_name" placeholder="姓名" clearable style="flex:1" disabled /> </el-form-item> <br> <el-form-item label="联系方式" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px"> <el-input v-model="sendAddr.sender_mobile" placeholder="联系方式" clearable style="flex:1" disabled /> </el-form-item> <br> <el-form-item label="省市区" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px"> <el-input v-model="sendAddr.sender_pca" placeholder="省市区" clearable style="flex:1" disabled /> </el-form-item> <br> <el-form-item label="详细地址" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px"> <el-input v-model="sendAddr.sender_address" placeholder="详细地址" clearable style="flex:1" disabled /> </el-form-item> <div></div> </el-form> </div>```给宽度100%没有作用

03-15

2. 当父容器使用flex布局时，百分比宽度可能失效 #### 解决方案： ```html <el-form-item style="width: calc(100% - 50px); margin-left: 50px"> ``` ### 四、推荐写法（已验证有效） ```html <div style="width:...

苹果手机input框fixed定位失效问题的解决方案

在页面上输入框获得焦点时，由于软键盘的弹出会改变视口大小或者滚动状态，原先设置为fixed定位的元素可能会失效，导致布局出现问题，用户界面的交互体验也会因此受到影响。在了解如何解决该问题之前，我们需要...

【多层flex嵌套自适应布局，flex: 1失效】

apjcui的博客

08-04

1558

【多层flex嵌套自适应布局，flex: 1失效】

解决：flex: 1；失效

Miss_Y0的博客

04-24

382

【代码】解决：flex: 1；失效。

div中子元素input设置flex无效

隔壁小王的博客

05-27

910

在flex布局下input设置flex:1失效的原因由于input默认存在最小宽度，所以在父元素宽度太小的情况下input设置了flex:1会失效解决办法 1:给input在嵌套一层div，设置flex 2:在给input设置width：100%

uniapp flex:1不生效

qq_28641023的博客

12-11

1626

这一层级，不能写display: flex;写了底下的 flex:1 不生效。

【踩坑】input的默认宽度，导致flex:1失效

hamal_ye的博客

01-07

3602

先说说这个坑的来源需求：input输入框跟一个点击按钮并排，点击按钮的宽度固定了，input的宽度就占满剩下的位置一想到占满剩下的位置，就习惯性地想到了flex:1，然后就写了如下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me...

flex布局父元素不换行子元素设置宽高不生效问题

团酱

03-29

1211

flex布局，flex-shrink属性

利用flex解决input定位的问题

qq_34393429的博客

03-12

1719

用简单的布局搞定input框使用fixed下输入的问题最近在做移动端H5聊天应用发现，当input框在最底部并且使用 position:fixed属性的时候在苹果手机中会出现不兼容的情况大概布局就是上面是列表底部是input并基于浏览器定位放置于最底部当点击输入框的时候会出现input位置错乱的情况这里出现了上移的情况这里出现了消失的情况，得滑动到最底下才会出现在经过一系列的面向百度编程后，各种监听input是否聚焦...