CSS Flex：如何在彈性行中獲得相同的高度

我在使用等列高度獲得flex佈局時遇到一些困難。我有一個包含一些行的容器（.row-container）（.flex-row）。這些行包含一些不同長度的內容。我希望所有行都具有相同的高度。據我的靈活理解，我必須在子項（.flex-row）中的父項（.row-container）和flex-grow: 1中設置flex: display和flex-direction。但是，行不具有相同的高度，請參閱jsfiddle。任何想法（也許是解釋）如何使這項工作？CSS Flex：如何在彈性行中獲得相同的高度

.row-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 300px; 
 
    width: 75%; 
 
    border: 1px solid blue; 
 
} 
 

 
.flex-row { 
 
    border: 1px solid black; 
 
    flex-grow: 1; 
 
    display: flex; 
 
    background-color: yellow; 
 
    align-items: center; 
 
} 
 

 
.col-wrapper {} 
 

 
.col-1, 
 
.col-2 { 
 
    border: 1px solid green; 
 
} 
 

 
.col-right { 
 
    padding-left: 10px; 
 
}

<div class="some-div"> 
 
    <div class="row-container"> 
 
    <div class="flex-row"> 
 
     <div class="col-wrapper"> 
 
     <div class="col-1">X</div> 
 
     <div class="col-2">some content</div> 
 
     </div> 
 
    </div> 
 
    <div class="flex-row"> 
 
     <div class="col-wrapper"> 
 
     <div class="col-1">XXX</div> 
 
     <div class="col-2">some longer content</div> 
 
     </div> 
 
    </div> 
 
    <div class="flex-row"> 
 
     <div class="col-wrapper"> 
 
     <div class="col-1">aa ab</div> 
 
     <div class="col-2">Amet illo distinctio facilis blanditiis alias. Explicabo dolores asperiores ducimus aut officiis, vero? Accusantium in accusantium ipsa iusto velit? Quas nesciunt ipsam amet impedit adipisci odio Omnis nemo perspiciatis quibusdam</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

（注意：在我的申請，我也做一些「列彎曲」在row-container此代碼從柔性定心ommitted分開）

來源

2017-08-02 user1924627

flex-grow作品這樣的：它需要的可用空間，並頗只有在應用flex-basis（當auto從width或height取得其值時，在當前情況下，因爲flex-direction: column而取值爲height）後才成立。在當前情況下，flex-basis是auto，因爲height是also。如果在申請flex-basis後沒有剩餘空間，flex-grow將不起作用。

所以你有幾個選擇在這裏：設置height: 0或設置flex-basis: 0。此外，您可能需要min-height: 0（因爲min-height: auto在某些情況下不允許flex-item佔用的內容少於其內容）。

演示：

.row-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 300px; 
 
    width: 75%; 
 
    border: 1px solid blue; 
 
} 
 

 
.flex-row { 
 
    border: 1px solid black; 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
    /* or height: 0; */ 
 
    /* if needed add min-height: 0; */ 
 
    display: flex; 
 
    background-color: yellow; 
 
    align-items: center; 
 
} 
 

 
.col-1, 
 
.col-2 { 
 
    border: 1px solid green; 
 
} 
 

 
.col-right { 
 
    padding-left: 10px; 
 
}

<div class="some-div"> 
 
    <div class="row-container"> 
 
    <div class="flex-row"> 
 
     <div class="col-wrapper"> 
 
     <div class="col-1">X</div> 
 
     <div class="col-2">some content</div> 
 
     </div> 
 
    </div> 
 
    <div class="flex-row"> 
 
     <div class="col-wrapper"> 
 
     <div class="col-1">XXX</div> 
 
     <div class="col-2">some longer content</div> 
 
     </div> 
 
    </div> 
 
    <div class="flex-row"> 
 
     <div class="col-wrapper"> 
 
     <div class="col-1">aa ab</div> 
 
     <div class="col-2">Amet illo distinctio facilis blanditiis alias. Explicabo dolores asperiores ducimus aut officiis, vero? Accusantium in accusantium ipsa iusto velit? Quas nesciunt ipsam amet impedit adipisci odio Omnis nemo perspiciatis quibusdam</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

此外，我會建議增加一些overflow值來指定行爲，例如overflow-y: auto，對於.flex-row。

來源

2017-08-02 16:12:52

.flex-row>*{height:100px;} 東西喜歡這個？

來源

2017-08-02 15:08:07 alex3wielki

有一個有點古怪的行爲在這裏，但你其實只需要設置一個高度上的行，即使高度爲0嘗試

.flex-row { 
    height: 0; 
}

來源

2017-08-02 15:10:13 i7nvd

有趣。 '身高：0'確實有效。今天我學到了一個新的技巧:)謝謝。 – user1924627

訣竅是將所有的flex項目（ .flex-row）具有相同的基線高度並允許它們彼此平等地增長。

例如

.flex-row { 
    flex: 1 0 0; 
}

爲了也許更容易理解：

.flex-row { 
    flex-grow: 1; 
    flex-basis: 0; 
    flex-shrink: 0; //not needed anyway because you have a base height of 0, so they'll never need to shrink 
}

有了這一點，但是，你所冒的風險是，如果你的三個柔性行的內容定義的高度比300px高 - 這您row-container，那麼每一行都會給予高度100px和內容可能溢出的.flex-row

來源

2017-08-02 15:20:05 Adam

謝謝。「flex-basis：0」確實是缺失的位。 – user1924627

CSS Flex：如何在彈性行中獲得相同的高度

回答

相關問題