1. ホーム
  2. css

[解決済み] フレックスボックスのアイテム間の距離を設定するためのより良い方法

2022-03-18 13:54:50

質問

フレックスボックスのアイテム間の最小距離を設定するために margin: 0 5px について .itemmargin: 0 -5px をコンテナ上で実行します。私にとってはハックのようなものですが、これ以上の方法は見つかりません。

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

解決方法は?

  • Flexbox には折りたたみ余白がありません。
  • Flexbox には、以下のようなものはありません。 border-spacing をテーブル用(編集。 CSSプロパティ gap は、新しいブラウザでこの役割を果たします。 を使用できますか? )

そのため、求めているものを実現するのは少し難しいです。

私の経験では、quot;cleanest" を使用しない方法です。 :first-child / :last-child には何も手を加えずに動作します。 flex-wrap:wrap を設定することです。 padding:5px をコンテナに、そして margin:5px を子要素に設定します。そうすると 10px 各子供の間、および各子供とその親との間のギャップ。

デモ

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}
<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>