爲什麼改變彎曲方向會改變孩子的身高？

我試圖做一個媒體查詢來顯示一個輸入在另一個下面，而不是在你身邊使用Flexbox。正如你所看到的，我目前的代碼，我得到這個：爲什麼改變彎曲方向會改變孩子的身高？

但是，如果我改變flex-direction到column，輸入寬度是不是原來的。這是結果：

這是我的HTML：

<div id="mc_embed_signup"> 
    <form action="//eliasgarcia.us8.list-manage.com/subscribe/post?u=55cf7078733f0b62eb97733e3&amp;id=ace40b1824" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
    <div id="mc_embed_signup_scroll"> 
     <label for="mce-EMAIL">No te pierdas ningún artículo</label> 
     <div class="mc-wrapper"> 
     <input type="email" value="" name="EMAIL" id="mce-EMAIL" placeholder="Correo electrónico" required> 
     <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
     <div style="position: absolute; left: -5000px;" aria-hidden="true"> 
      <input type="text" name="b_55cf7078733f0b62eb97733e3_ace40b1824" tabindex="1" value=""> 
     </div> 
     <div> 
      <input type="submit" value="Suscríbete" name="subscribe" id="mc-embedded-subscribe" class="button"> 
     </div> 
     </div> 
     <div class="mc-error"> 
     </div> 
    </div> 
    </form> 
</div>

這是我的CSS：

#mc_embed_signup { 
    label { 
    font-size: 2em; 
    font-weight: bold; 
    display: block; 
    text-align: center; 
    } 
    .mc-wrapper { 
    display: flex; 
    justify-content: space-between; 
    padding: 30px 0px 0px 0px; 
    } 
    #mce-EMAIL { 
    width: 100%; 
    margin: 0px 30px 0px 0px; 
    border: 2px solid $medium-grey; 
    border-radius: 4px; 
    text-indent: 20px; 
    } 
    .button { 
    margin: 0px auto; 
    cursor: pointer; 
    } 
}

這究竟是爲什麼？

注：我不能提供小提琴，因爲這是一個與MailChip的集成，所以它調用JS腳本，它不能在小提琴上正常工作，我不知道爲什麼...但腳本不添加任何額外的類，只有上面的那些。

來源

2017-03-16 Elias Garcia

與flex-direction: row（默認爲display: flex）柔性母的柔性孩子將是相等的高度。因此，由於您的左邊input是.mc-wrapper的直接子項，所以它的高度將等於其旁邊項目的高度，並且這將導致input的高度增加，因爲右側的flex子項更高。

當您切換到flex-direction: column時，您不再有相鄰的孩子連接在一起，並且flexbox不會嘗試匹配高度，因此input將是自然的任何高度。

來源

2017-03-16 21:22:09

啊，我現在明白了！那麼，在這種情況下，不可能將第一個輸入高度設置爲與第二個右側相同？ –

@EliasGarcia不是沒有修改你的標記。但很簡單 - 只需在'div'的左邊包裝'input'，'div'將是其高度被改變而不是'輸入'的flex孩子。然後，您可以將「輸入」的寬度設置爲100％或您需要執行的任何其他操作。 –

是的，現在工作正常，非常感謝解釋！ –

爲什麼改變彎曲方向會改變孩子的身高？

回答

相關問題