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

它的工作原理，如果你在使用％宽度，你给盒大小：边界盒;到项目：

.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%; 
 
}

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