Flexbox行：如何拉伸兒童填充橫軸？

我有一個左右Flexbox的：Flexbox行：如何拉伸兒童填充橫軸？

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    width: 100%; 
 
    height: 70vh; 
 
    min-height: 325px; 
 
    max-height:570px; 
 
}

<div class="wrapper"> 
 
    <div class="left">Left</div> 
 
    <div class="right">Right</div> 
 
</div>

的問題是，右孩子沒有行爲響應。具體來說，我希望它能夠填充包裝的高度。如何做到這一點？

感謝，黛比

來源

2015-04-06 Deborah Cole

_I想要它填充包裝的高度 - - 你的意思是包裝的***寬度***？ – 2015-04-06 15:22:06

是的，包裝的高度沒有填充safari出於某些原因...鉻和火狐很好地通過設置高度：'100％'在兒童 – Pencilcheck 2017-07-14 06:43:02

一個行Flexbox的容器的子女自動填充容器的垂直空間。
爲孩子指定flex: 1;，如果你想它來填充剩下的水平空間：如果您希望用戶填寫

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    width: 100%; 
 
    height: 5em; 
 
    background: #ccc; 
 
} 
 
.wrapper > .left 
 
{ 
 
    background: #fcc; 
 
} 
 
.wrapper > .right 
 
{ 
 
    background: #ccf; 
 
    flex: 1; 
 
}

<div class="wrapper"> 
 
    <div class="left">Left</div> 
 
    <div class="right">Right</div> 
 
</div>

指定flex: 1;爲兒童等量的水平空間：

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    width: 100%; 
 
    height: 5em; 
 
    background: #ccc; 
 
} 
 
.wrapper > div 
 
{ 
 
    flex: 1; 
 
} 
 
.wrapper > .left 
 
{ 
 
    background: #fcc; 
 
} 
 
.wrapper > .right 
 
{ 
 
    background: #ccf; 
 
}

<div class="wrapper"> 
 
    <div class="left">Left</div> 
 
    <div class="right">Right</div> 
 
</div>

來源

2015-04-06 15:24:55

['flex']（https：//developer.mozilla .org/en-US/docs/Web/CSS/flex）是['flex-grow']的簡寫屬性（https://developer.mozilla.org/en-US/docs/Web/CSS/flex-增長），['flex-shrink']（https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink）和['flex-basis']（https：// developer .mozilla.org/EN-US /文檔/網絡/ CSS /柔性基礎）。 'flex：1;'相當於'flex-grow：1;'。 – 2017-11-21 01:24:59

它填補包裝的高度！我在Chrome和Firefox中測試過，沒有問題。也許你已經簡化了你的代碼太多了。你可以通過爲兒童設置background-color或者在包裝中設置align-items: center來測試。

來源

2015-09-01 08:48:39

Flexbox行：如何拉伸兒童填充橫軸？

回答

相關問題