选择元素的增长与显示flex输入的增长不同 [英] Select element grows differently than input in display flex

问题描述

在设置中，我出现了意外的行为.输入水平按预期水平增长，但在具有选择控件的行上，增长似乎失真.

I'm getting an unexpected behavior in my setup. The inputs grow horizontally as expected but on the row with a select control, the growth seems to be distorted.

我怀疑某种风格会有所不同，但仔细检查却使我无所适从.谷歌搜索什么也没做，我找不到关于隐式边距和选择填充的任何信息.

I suspected some style to be different but a close inspection led me nowhere. Googling gave nothing and I can't find anything about implicit margin nor padding for selects.

这是什么意思，我怎么杀死它?

What is this about and how do I kill it?

div.full-page {
  margin: 20px;
  padding: 20px;
  background: ghostwhite;
}

div.input-section {
  border: 3px none darkorchid;
  width: 600px;
}

div.input-title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 18px;
  border-bottom: 2px solid darkorange;
  padding-bottom: 5px;
}

div.input-row {
  border: 3px none darkolivegreen;
  display: flex;
}

div.input-element {
  border: 3px none darkcyan;
  padding: 10px;
  flex-grow: 1;
  // display:flex;
}

div.input-element input,
div.input-element select {
  width: 100%;
  // border: solid 1px mediumvioletred;
  // padding: 0;
  // margin: 0;
}

div.input-caption {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: darkgrey;
  font-size: 14px;
}

<div class="full-page">

  <div>

    <div class="input-section">
      <div class="input-title">Title 1</div>

      <div class="input-row">
        <div class="input-element">
          <div class="input-caption">Uno</div>
          <input type="text" placeholder="Konrad">
        </div>
        <div class="input-element">
          <div class="input-caption">Duo</div>
          <input type="text" placeholder="Viltersten">
        </div>
      </div>

    </div>

    <div #privs class="input-section">
      <div class="input-title">Title 2</div>

      <div class="input-row">
        <div class="input-element">
          <div class="input-caption">Tress</div>
          <input placeholder="Is really">
        </div>

        <div class="input-element">
          <div class="input-caption">Quatro</div>
          <select>
            <option>The one and only</option>
          </select>
        </div>
      </div>

    </div>

</div>

推荐答案

您正在使用flex-grow: 1调整弹性商品的尺寸.当所有项目都相同或包含相同内容时很好.

You're using flex-grow: 1 to size your flex items. That's fine when all items are identical or contain identical content.

除了您的一项弹性项目不同.它具有select元素.这将影响项目的大小，因为弹性项目的初始值为flex-basis: auto.

Except one of your flex items is different. It has the select element. That will affect the sizing of the item because an initial value of a flex item is flex-basis: auto.

对于flex-basis: auto，flex-grow属性在之后生效.考虑到项目的宽度.由于项目的宽度不同，因此在应用flex-grow之后其大小将会有所不同.

With flex-basis: auto the flex-grow property goes into effect after the width of the item is factored in. Because the width of your items are different, their size after flex-grow is applied will be different.

您需要使用flex-basis: 0，这允许flex-grow忽略项目的宽度，而仅关注容器中的可用空间.

You need to use flex-basis: 0, which allows flex-grow to ignore the width of the item and focus only on the available space in the container.

代替flex-grow: 1使用此:

• flex: 1

以下简称:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

有关详细信息，请参见规范: https://www. w3.org/TR/css-flexbox-1/#flex-common

See the spec for more details: https://www.w3.org/TR/css-flexbox-1/#flex-common

此外，为了解决此类问题，规范建议始终使用flex速记而不是长期属性:

Also, to counter problems such as these, the spec recommends always using the flex shorthand as opposed to longhand properties:

7.2.的组成 灵活性

7.2. Components of Flexibility

鼓励作者使用flex控制灵活性 速记而不是直接具有其速记属性，例如 速记可以正确重置任何未指定的组件以适应 常见用途.

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

这篇关于选择元素的增长与显示flex输入的增长不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！