输入/按钮元素不能在柔性容器中正确调整大小 [英] input / button elements not re-sizing properly in a flex container

查看：98
本文介绍了输入/按钮元素不能在柔性容器中正确调整大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在flex容器中使用输入和按钮元素时， flex 和/或 flex-grow 属性
$ b

代码显示了我的问题。 



 
 
 
 
 
背景颜色：＃333; color：#EEE;} input {border：1px solid #AAA; padding-left：0.5rem;}。inputrow {width：30rem;显示：flex; margin：0 -25rem;} .inputrow> * {margin：0 .25rem; border-radius：2px;身高：1.75rem; box-sizing：border-box;}。nickname {flex：1;}。message {flex：4;}。s-button {flex：1;}  
 < pre class =snippet-code-html lang-html prettyprint-override> < div class =inputrow> < input type =textclass =nicknameplaceholder =Nickname> < input type =textclass =messageplaceholder =Message> < button type =submitclass =s-button> Submit< / button>< / div>



显示我期待的代码。 （使用DIV而不是输入和按钮）。



.inputrow {width：30rem;显示：flex;弯曲流动：行nowrap; margin：0 -25rem;} .inputrow> * {margin：0 .25rem; height：1.75rem;}。nickname {flex：1; background-color：blue;}。message {flex：4; background-color：red;}。s-button {flex：1;

inputrow > < div class =nickname>昵称< / div> < div class =message> Message< / div> < div class =s-button> Submit< / div>< / div>

$ b

解决方案

一个输入元素，不同于 div ，有一个固有的宽度。
$ b 在flex项目上的初始设置是 min-width：auto 。



因此，作为flex容器子元素的元素 input 不能缩小到其固有宽度以下。一般来说，默认情况下，flex项目不能收缩到其内容的长度以下。



您可以通过将输入设置为 min -width：0 （修改的codepen ）



这里有一个更完整的解释：为什么flex项目不能收缩过去的内容大小？


When using input and button elements inside a flex container, the flex and/or flex-grow properties don't seem to do anything.

Code that demonstrates my issue.

button,
input {
  font-size: 1rem;
}

button {
  border: none;
  background-color: #333;
  color: #EEE;
}

input {
  border: 1px solid #AAA;
  padding-left: 0.5rem;
}

.inputrow {
  width: 30rem;
  display: flex;
  margin: 0 -.25rem;
}

.inputrow>* {
  margin: 0 .25rem;
  border-radius: 2px;
  height: 1.75rem;
  box-sizing: border-box;
}

.nickname {
  flex: 1;
}

.message {
  flex: 4;
}

.s-button {
  flex: 1;
}

<div class="inputrow">
  <input type="text" class="nickname" placeholder="Nickname">
  <input type="text" class="message" placeholder="Message">
  <button type="submit" class="s-button">Submit</button>
</div>

Code that shows what I'm expecting. (using DIVs instead of input and button).

.inputrow {
  width: 30rem;
  display: flex;
  flex-flow: row nowrap;
  margin: 0 -.25rem;
}

.inputrow>* {
  margin: 0 .25rem;
  height: 1.75rem;
}

.nickname {
  flex: 1;
  background-color: blue;
}

.message {
  flex: 4;
  background-color: red;
}

.s-button {
  flex: 1;
  background-color: green;
}

<div class="inputrow">
  <div class="nickname">Nickname</div>
  <div class="message">Message</div>
  <div class="s-button">Submit</div>
</div>

解决方案

An input element, unlike a div, comes with an intrinsic width.

An initial setting on flex items is min-width: auto.

Therefore, input elements that are children of a flex container cannot shrink below their intrinsic width. In general, flex items, by default, cannot shrink below the length of their content.

You can override this behavior by setting your inputs to min-width: 0 (revised codepen)

Here's a more complete explanation: Why doesn't flex item shrink past content size?

这篇关于输入/按钮元素不能在柔性容器中正确调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆