0
4つのdivs/columnsの中にさまざまな量のテキストがあります。フレックスボックスを使用すると、すべての列のサイズを最大のdivサイズにすることができると仮定しましたが、コードパッドを含めて列がすべて高さが異なるように見えるはずです。フレックスボックスを使用した平行な列の高さの問題
私の最終目標は、すべて同じ高さにすることですが、ページがサイズ変更されたときに一度に絞ってストレッチする必要があります。中間点では、列が2 x 2グリッドで並べ替えられ、すべてのdivは、もう一方の上に積み重ねられます。この部分は期待通りに動作しますが、4つのdivはまだ様々なサイズです。
HTML：
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="table-layout">
<div class="table-cell row">
<div class="flexboxContainer">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="panel panel-default summary-panel" style="background: green; color: white;">
<div class="panel-body flexboxContent">
<div class="chartContainer">
<div class="table-layout">
<div class="table-cell row">
<h1>0</h1>
<span style="font-size: 14px">blah blah blah blah</span>
</div>
<div class="table-cell row">
<span style="font-size: 64px; opacity: 0.3"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="panel panel-default summary-panel" style="background: green; color: white;">
<div class="panel-body flexboxContent">
<div class="chartContainer">
<div class="table-layout">
<div class="table-cell row">
<h1>0</h1>
<span style="font-size: 14px">blah blah blah blah blah blah blah blah blah blah blah blah</span>
</div>
<div class="table-cell row">
<span style="font-size: 64px; opacity: 0.3"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="panel panel-default summary-panel" style="background: green; color: white;">
<div class="panel-body flexboxContent">
<div class="chartContainer">
<div class="table-layout">
<div class="table-cell row">
<h1>0</h1>
<span style="font-size: 14px">blah blah blah blah</span>
</div>
<div class="table-cell row">
<span style="font-size: 64px; opacity: 0.3"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="panel panel-default summary-panel" style="background: green; color: white;">
<div class="panel-body flexboxContent">
<div class="chartContainer">
<div class="table-layout">
<div class="table-cell row">
<h1>0</h1>
<span style="font-size: 14px">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span>
</div>
<div class="table-cell row">
<span style="font-size: 64px; opacity: 0.3"><i class="fa fa-smile-o"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS：
.flexboxContainer {
display: flex;
border: solid red;
flex-wrap: wrap;
}
.flexboxContent {
border: solid black;
flex: 1 1 0;
align-items: stretch;
}
.table-layout {
display:table;
width:100%;
}
.table-layout .table-cell {
display:table-cell;
}
.chartContainer {
position: relative;
}
Codepen例： https://codepen.io/synchrosion/pen/yopxGY
私はフレキシボックスコンテナとフレキシボックスの内容はわかりやすくするために国境を強調している、と私はしようとしています固定された最小または最大の高さを指定せずに、すべてのフレックスボックスコンテンツボックスを同じ高さにすること。
すべてのヘルプは大幅にちょうどあなたのCSSに追加
のために高さを100％に設定する必要があります。 * way *マークアップを使用しています。 – Adam
私はずっと複雑なコードから単純化していましたが、divの中に余分なdivをいくつか残しておきたいのですが、flexboxがdivの高さと等しくない理由がわかっていれば – RonanMc
余分なマークアップはフレックスボックスは正しくはるかに困難です。 – Adam