2 つの flex アイテムを含む flex コンテナーがあります。2 番目のアイテムに margin-top を設定したいのですが、これは最初の flex 行ではなく、ラップされている場合にのみ設定します。
可能であれば、メディアクエリの使用は避けたいと思います。
最初の要素に margin-bottom を設定すると解決できると思いました。ただし、要素が折り返されていない場合は下部にスペースが追加されるため、同じ問題が発生します。
これが私のコードです:
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.item-big {
background: blue;
width: 300px;
}
.item-small {
background: red;
margin-top: 30px;
}<div class="container">
<div class="item-big">
FIRST BIG ELEM
</div>
<div class="item-small">
SECOND SMALL ELEM
</div>
</div>ベストアンサー1
margin-top両方のフレックス アイテムに一部を追加し、margin-top同じ量の負の数をフレックス コンテナーに追加できます。
この方法では、フレックス コンテナーの負のマージンは最初の行のフレックス アイテムのマージンを中和しますが、他の行に折り返されたアイテムのマージンは中和しません。
.container {
margin-top: -30px;
}
.item-big, .item-small {
margin-top: 30px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top: -30px;
}
.item-big, .item-small {
margin-top: 30px;
background: red;
}
.item-big {
background: blue;
width: 300px;
}<div class="container">
<div class="item-big">
FIRST BIG ELEM
</div>
<div class="item-small">
SECOND SMALL ELEM
</div>
</div>今では全体的にサポートされています（翻訳）フレックスレイアウトコンテナのCSS（行）ギャッププロパティの答え提案します。進むべき道は����。