4
可変高さの要素をコンテナ間で垂直に配置しようとしています。つまり、各コンテナの最初の要素が互いに垂直に整列し、各コンテナの2番目の要素が垂直に整列します。 。など異なる親コンテナの子要素を整列する
私はフレックスボックスを使用していますが、これが可能なのかどうかはわかりません。それともCSSグリッドを使用することは可能ですか？
私はそれがまだ働いて得ることができなかった望ましい結果
main {
display: flex;
flex-wrap: wrap;
}
.container {
background: grey;
margin: 0 10px 20px;
padding: 10px;
width: 200px;
}
.top {
background: red;
}
.middle {
background: blue;
}
.bottom {
background: green;
}<main>
<div class="container">
<div class="top">Some text here, Some text here, Some text here</div>
<div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
<div class="bottom">And a little here too</div>
</div>
<div class="container">
<div class="top">Some text here, Some text here</div>
<div class="middle">And some here, And some here, And some here, And some here, And some here, And some here, And some here, And some here, And some here</div>
<div class="bottom">And a little here too, And a little here too</div>
</div>
<div class="container">
<div class="top">Some text here, Some text here, Some text here, Some text here, Some text here</div>
<div class="middle">And some here</div>
<div class="bottom">And a little here too</div>
</div>
<div class="container">
<div class="top">Some text here, Some text here, Some text here</div>
<div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
<div class="bottom">And a little here too</div>
</div>
<div class="container">
<div class="top">Some text here, Some text here, Some text here</div>
<div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
<div class="bottom">And a little here too</div>
</div>
<div class="container">
<div class="top">Some text here, Some text here, Some text here</div>
<div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
<div class="bottom">And a little here too</div>
</div>
<div class="container">
<div class="top">Some text here, Some text here, Some text here</div>
<div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
<div class="bottom">And a little here too</div>
</div>
</main>
あなたが各フレックス項目別に – vsync
フレキシボックスが柔軟で揃える必要があります。のように、それはあなたの子供の要素がコンテンツに応じて異なる次元を持つことができます。異なる親から子供をリンクさせたい場合は、親の中で 'flexbox'の動作を無効にし、それらに一定の高さを与える規則を与える必要があります。または関連するすべてのアイテムが同じ親行内の兄弟であるように、マークアップを変更する必要があります。 3番目のオプションは、 'javascript'を使ってそれらをリンクすることです。 –
@AndreiGheorghiu - はい、これは私が逃げようとしていたものです。つまり、コンテンツの高さが変わる可能性があるため、固定高さはありません。そして、私はすべての子要素がそれ自身の親コンテナ内に現れるようにする必要があります（毎回不明な数のコンテナがあります）。 – Ash