display: flex; のgapを要素サイズに入れる

Question

親要素 {
display: flex;
flex-wrap: wrap;
gap: 1em;
}

子要素 {
width: 50%;
}

複数子要素を2列（横幅きっちり）折り返して表示したいですが、上記の指定だと、gapの幅が要素外になってしまうために横に50%を超えて２列にならずに折り返して１列になってしまいます。

box-sizing: border-box;　のpadding の様に、gap余白を要素サイズに入れる方法はありませんでしょうか。

Answer 1

質問の意図が不明確ですが、こういうことでしょうか？

<style>
.parent{
display: flex;
flex-wrap: wrap;
background-Color:yellow;
gap:1em;
}
.child {
height:50px;
width: calc(50% - 0.5em);
background-Color:gray;
}
</style>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>

Comments

[退会済みユーザー]

ありがとうございます。こちらでコード修正しました。

Answer 2

flex ではなく grid を使えばどうでしょう。

  親要素 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }

子要素 {
/* 設定不要 */
  }

Comments

[退会済みユーザー]

ありがとうございます。こちらでも可能かと思います。