如何讓flexbox列的高度相同？

Question

我試圖用我的頭圍繞Flexbox，我用一些非常簡單的東西撞牆，我似乎無法做對。

我有6列我希望所有相同的高度，每行3個。 我已將flex項設置為寬度為33％，但我沒有設置任何高度。 我認為一旦flex項目有內容，它將采取具有最大高度的一個並且匹配它的一切。

這是我的標記：

 .container { width: 800px; padding: 0 15px; } .row-flex { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: -15px; margin-left: -15px; flex-wrap: wrap; } .flexbox { flex: 0 0 33%; padding: 0 15px; } .icon-box-1 { position: relative; margin-bottom: 50px; background: #fff; text-align: center; border: 1px solid #eee; padding: 10px; } 

 <div class="container"> <div class="row-flex"> <div class="flexbox"> <div class="icon-box-1"> <h1> One </h1> <h3>Title</h3> <p>lots of random text, lots of random text, lots of random text, lots of random text</p> </div> </div> <div class="flexbox"> <div class="icon-box-1"> <h1> Two </h1> <h3>Title</h3> <p>lots of random text</p> </div> </div> <div class="flexbox"> <div class="icon-box-1"> <h1> Three </h1> <h3>Title</h3> <p>lots of random text, lots of random text, lots of random text, lots of random text</p> </div> </div> <div class="flexbox"> <div class="icon-box-1"> <h1> Four </h1> <h3>Title</h3> <p>lots of random text, lots of random text, lots of random text</p> </div> </div> <div class="flexbox"> <div class="icon-box-1"> <h1> Five </h1> <h3>Title</h3> <p>lots of random text, lots of random text, lots of random text</p> </div> </div> <div class="flexbox"> <div class="icon-box-1"> <h1> Six </h1> <h3>Title</h3> <p>lots of random text, lots of random text, lots of random text</p> </div> </div> </div> </div> 

Answer 1

等高列功能來自align-items: stretch ，這是flex容器的初始設置。 它使彈性項目消耗橫軸中的所有可用空間。

如果檢查每個彈性項目的實際大小，您將看到它們實際上是每行的相同高度（ 演示 ）。

問題是每個項目（ .icon-box-1 ）的內容沒有拉伸到整個高度。 它只是height: auto （內容高度），默認情況下。

為了使內容伸展到全高，請在每個彈性項目中添加display: flex ，這樣align-items: stretch生效，就像在父級（ 演示 ）上一樣。

然后使用flex: 1使內容填充主軸上的剩余空間（ 演示 ）。

 .container { width: 800px; padding: 0 15px; } .row-flex { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: -15px; margin-left: -15px; flex-wrap: wrap; } .flexbox { flex: 0 0 33%; padding: 0 15px; border: 1px dashed red; /* for illustration */ display: flex; /* new */ } .icon-box-1 { flex: 1; /* NEW */ position: relative; margin-bottom: 50px; background: #fff; text-align: center; border: 1px solid #eee; padding: 10px; } 

 <div class="container"> <div class="row-flex"> <div class="flexbox"> <div class="icon-box-1"> <h1> One </h1> <h3>Title</h3> <p>lots of random text, lots of random text, lots of random text, lots of random text</p> </div> </div> <div class="flexbox"> <div class="icon-box-1"> <h1> Two </h1> <h3>Title</h3> <p>lots of random text</p> </div> </div> <div class="flexbox"> <div class="icon-box-1"> <h1> Three </h1> <h3>Title</h3> <p>lots of random text, lots of random text, lots of random text, lots of random text</p> </div> </div> <div class="flexbox"> <div class="icon-box-1"> <h1> Four </h1> <h3>Title</h3> <p>lots of random text, lots of random text, lots of random text</p> </div> </div> <div class="flexbox"> <div class="icon-box-1"> <h1> Five </h1> <h3>Title</h3> <p>lots of random text, lots of random text, lots of random text</p> </div> </div> <div class="flexbox"> <div class="icon-box-1"> <h1> Six </h1> <h3>Title</h3> <p>lots of random text, lots of random text, lots of random text</p> </div> </div> </div> </div> 

Answer 2

嘗試將“display：flex”添加到.flexbox，將“flex：0 1 auto”添加到圖標框中，使其填滿高度。 你走了：

 .container { width: 800px; padding: 0 15px; } .row-flex { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: -15px; margin-left: -15px; flex-wrap: wrap; } .flexbox { flex: 0 0 33%; padding: 0 15px; display: flex; flex-wrap: wrap; flex-direction: column; } .icon-box-1 { position: relative; margin-bottom: 50px; background: #fff; text-align: center; border: 1px solid #eee; padding: 10px; flex: 1 0 auto; } 

 <div class="container"> <div class="row-flex"> <div class="flexbox"> <div class="icon-box-1"> <h1> One </h1> <h3>Title</h3> <p>lots of random text, lots of random text, lots of random text, lots of random text</p> </div> </div> <div class="flexbox"> <div class="icon-box-1"> <h1> Two </h1> <h3>Title</h3> <p>lots of random text</p> </div> </div> <div class="flexbox"> <div class="icon-box-1"> <h1> Three </h1> <h3>Title</h3> <p>lots of random text, lots of random text, lots of random text, lots of random text</p> </div> </div> <div class="flexbox"> <div class="icon-box-1"> <h1> Four </h1> <h3>Title</h3> <p>lots of random text, lots of random text, lots of random text</p> </div> </div> <div class="flexbox"> <div class="icon-box-1"> <h1> Five </h1> <h3>Title</h3> <p>lots of random text, lots of random text, lots of random text</p> </div> </div> <div class="flexbox"> <div class="icon-box-1"> <h1> Six </h1> <h3>Title</h3> <p>lots of random text, lots of random text, lots of random text</p> </div> </div> </div> </div>