Flex在Firefox中无法正常工作

Question

我有两个文本输入似乎与flex没有合作。

他们应该像这样定位：

..而是定位如下：

CSS

.container{
    width: 48.1%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox; 
    display: -webkit-flex;
    display:flex;
    justify-content: space-between;
}

input[type=text] {
    font-size: 18px;
    padding: 8px;
    font-family: 'lato';
    font-weight: 300;
    line-height: 20px;
    transition: all linear .5s;
    display: inline;
    margin-top: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ddd;
}

#zip{
    flex: .21;
}

#phone{
    flex: .7; 
}

对于flex:，我使用的是分数，这样它们就不会加1，并且应该在彼此之间留下一点差距。但这并没有发生。

HTML

<div class="container">
    <input type="text" id="zip" name="zip" placeholder="Zip Code" maxlength="5" pattern=".{5,}" oninvalid="setCustomValidity('Please enter a 5-digit zip code')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 48 &amp;&amp; event.charCode <= 57 || event.charCode == 0" required="">
    <input type="text" id="phone" name="phone" placeholder="Phone Number e.g. 888-888-8888" maxlength="12" pattern=".{12,}" oninvalid="setCustomValidity('Please enter a 10-digit phone number')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 45 &amp;&amp; event.charCode <= 57 || event.charCode == 0" required="">              
</div>

这似乎适用于Chrome和Safari，但在Firefox中不起作用。

Answer 1

我发现这特别是input元素的问题。 flex不适用于Firefox中的input元素，除非您将其添加到CSS：

input { min-width: 1px; }

Answer 2

这是一种方法：

• 在align-items:center
中添加height（包含一些.container）
• 仅向margin和input添加flex:1 #phone，max-width至#zip

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: red;
  height: 100px
}

input[type=text] {
  font-size: 18px;
  padding: 8px;
  font-family: 'lato';
  font-weight: 300;
  line-height: 20px;
  transition: all linear .5s;
  appearance: none;
  border: 1px solid #ddd;
}

input {
  margin: 0 10px
}

#zip {
  max-width: 70px
}

#phone {
  flex: 1
}

<div class="container">
  <input type="text" id="zip" name="zip" placeholder="Zip Code" maxlength="5" pattern=".{5,}" oninvalid="setCustomValidity('Please enter a 5-digit zip code')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 48 &amp;&amp; event.charCode <= 57 || event.charCode == 0"
    required="">
  <input type="text" id="phone" name="phone" placeholder="Phone Number e.g. 888-888-8888" maxlength="12" pattern=".{12,}" oninvalid="setCustomValidity('Please enter a 10-digit phone number')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 45 &amp;&amp; event.charCode <= 57 || event.charCode == 0"
    required="">
</div>

Answer 3

如果你使用宽度％，你可以使用box-sizing：border-box;对项目：

＆＃13;

＆＃13;

.container{
    width: 48.1%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox; 
    display: -webkit-flex;
    display:flex;
    justify-content: space-between;
}

input[type=text] {
    font-size: 18px;
    padding: 8px;
    font-family: 'lato';
    font-weight: 300;
    line-height: 20px;
    transition: all linear .5s;
    display: inline;
    margin-top: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ddd;
  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#zip{
    width: 21%;
}

#phone{
    width: 70%;
}

＆＃13;

<div class="container">
    <input type="text" id="zip" name="zip" placeholder="Zip Code" maxlength="5" pattern=".{5,}" oninvalid="setCustomValidity('Please enter a 5-digit zip code')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 48 &amp;&amp; event.charCode <= 57 || event.charCode == 0" required="">
    <input type="text" id="phone" name="phone" placeholder="Phone Number e.g. 888-888-8888" maxlength="12" pattern=".{12,}" oninvalid="setCustomValidity('Please enter a 10-digit phone number')" onchange="try{setCustomValidity('')}catch(e){}" onkeypress="return event.charCode >= 45 &amp;&amp; event.charCode <= 57 || event.charCode == 0" required="">              
</div>

＆＃13;

＆＃13;

＆＃13;