web-dev-qa-db-ja.com

Css flexbox間隔のあるガター

1行に3つのアイテムをインライン化しようとしています。すべてのアイテムには少しスペースが必要です。問題は、マージンを追加すると、3番目のアイテムが折り返されることです。私はすでに親に負のマージンを追加しようとしましたが、それは機能していません。

私は私の問題で例を作りました例は使用しています tailwindcss ：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

  <title>JS Bin</title>
</head>
<body>
<div class="flex flex-wrap -m-2">
  <div class="bg-red-500 w-1/3 p-4 m-2">
    test
  </div>  
  
   <div class="bg-red-500 w-1/3 p-4 m-2">
    test
  </div> 
  
   <div class="bg-red-500 w-1/3 p-4 m-2">
    test
  </div> 
</div>
</body>
</html>

flex-wrapは3アイテムごとにラップする必要があるため、削除できません。また、paddingを使用できません。

どうすればこれを機能させることができますか？

htmlcssflexboxtailwind-cssgutter
4
Jamie

問題は、divが親の幅の1/3であるということですが、そこにマージンを追加すると、合計幅が100％を超えます。要素の幅の一部としてカウントされるパディングとは異なり、マージンはに加えて要素の幅です。

したがって、ここには2つの可能な解決策があります。 1つ目は、幅を親幅の1/3から目的のマージンを引いた値に設定することです。 Tailwindによるとm-2のように見える例で.5remを使用したので、各ボックスの右側と左側の両方のマージンを考慮して、その数を2倍にし、最終的にこれになります。 ：

.flex-wrap > div {
  width: calc(33.333333% - 1rem);
}
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<div class="flex flex-wrap">
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
</div>

それが気に入らない場合は、各divの幅を1/3の単純なものに保つことができる、2番目のオプションは、背景色と同じ色の境界線を使用することです。それが可能かどうかはあなたのデザインが必要になります。明らかに、背景画像がある場合、またはdivにデザインに従って境界線があるはずの場合、これは機能しない可能性があります（ただし、後者の場合は、いつでもdivをネストして問題を処理できます）。

.flex-wrap > div {
  border: .5rem solid white;
}
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<div class="flex flex-wrap">
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
</div>
2
cjl750

私のように、33.33333333% -1remを使用するというアイデアが気に入らない場合は、組み込みのflexboxプロパティを使用できます。

以下のスニペットに示すように、アイテムごとにルールflex: 1 0 0;を設定するだけです。

最後の0はflexboxに各アイテムの最初のwithを無視するように指示し、次に1はアイテムが一緒になって全幅に達するまで成長するように指示しますflexboxコンテナ。（最初の0は、含まれているテキストよりも小さく縮小しないように指示します。）

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

  <title>JS Bin</title>
  <style>
    .custom-flexbox-1 > div {
      flex: 1 0 0;
    }
    html {
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="flex flex-wrap -m-2 custom-flexbox-1">
    <div class="bg-red-500 w-1/3 p-4 m-2">
      test
    </div>

    <div class="bg-red-500 w-1/3 p-4 m-2">
      test
    </div>

    <div class="bg-red-500 w-1/3 p-4 m-2">
      test
    </div>
  </div>
</body>

</html>
2
Skylar

あなたはあなたのCSSにわずかな変更を加える必要があります。親の幅は100％、子の幅は33.33％であるため、マージンを含めて1行に収めることはできません。マージンは要素の上にあるため、全幅は100％を超え、最後の要素は新しい行に移動されます。

したがって、ここではcalcを使用します。マージンに対応できる幅が必要です。したがって、width = calc（33.33％-20px）の場合、divごとに20pxのスペースがあり、これを使用して各側に10pxのマージンを与えることができます。均一性を維持するために、与えられたマージンが33.33％から差し引く値の50％であることを確認してください。

コードを更新しました（スタイルタグを追加し、それに応じてcssを変更しました）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

  <title>JS Bin</title>
  <style>
    .test {
      width: calc(33.33% - 20px);
      margin: 10px;
    }
  </style>
</head>
<body>
<div class="flex flex-wrap">
  <div class="bg-red-500 test p-4">
    test
  </div>  
  
   <div class="bg-red-500 test p-4">
    test
  </div> 
  
   <div class="bg-red-500 test p-4">
    test
  </div> 
  <div class="bg-red-500 test p-4">
    test
  </div>  
  
   <div class="bg-red-500 test p-4">
    test
  </div> 
  
   <div class="bg-red-500 test p-4">
    test
  </div>
</div>
</body>
</html>

お役に立てば幸いです。明確にするために元に戻します。

2
Sunil Chaudhary

追い風についてはわかりませんが、Vanilla CSSを使用すると、それを実現できますハックなしでcalc各子の_flex: 1;_と_margin-right_の:not(:last-child)

もちろん、CSSグリッドでも簡単に実行できます（アイテム間で均等に分散）。列が3つしかないことが事前にわかっている場合は、グリッドの方が簡単な場合があります。

_.container {
  height: 100px;
  background: red;
  display: flex;
}
.child {
  background: blue;
  flex: 1;
}
.child:not(:last-child) {
  margin-right: 10px;
}

/* Grid way */
.container-grid {
  height: 100px;
  background: red;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-column-gap: 10px;
}
.child-grid {
  background: blue;
}

/* Even be easier if you know ahead that there're only 3 items */
.container-grid-3 {
  background: red;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.child-grid-3 {
  height: 100px;
  background: blue;
}_
_<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<hr>

<div class="container-grid">
  <div class="child-grid"></div>
  <div class="child-grid"></div>
  <div class="child-grid"></div>
  <div class="child-grid"></div>
</div>

<hr>

<div class="container-grid-3">
  <div class="child-grid-3"></div>
  <div class="child-grid-3"></div>
  <div class="child-grid-3"></div>
  <div class="child-grid-3"></div>
</div>_
1
Loi Nguyen Huynh

これは確かにあなたのリンクタグに従って機能します：

<div class="flex flex-wrap " style="justify-content: space-evenly;">
    <div class="bg-red-500 p-4 m-2 " style="width: 30%;">
      test
    </div>

    <div class="bg-red-500 p-4 m-2" style="width: 30%;">
      test
    </div>

    <div class="bg-red-500 p-4 m-2" style="width: 30%;">
      test
    </div>
  </div>

チェック： https://jsfiddle.net/sugandhnikhil/o62p7jez/

1
nikhil sugandh

境界線の下に背景が描画されないように、マージンと背景クリップの代わりに透明な境界線を使用することもできます。

.bg-red-500 {
  border: 0.5em transparent solid;
  background-clip: padding-box;/* do not draw me where borders stand */
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

  <title>JS Bin</title>
</head>

<body>
  <div class="flex flex-wrap m-2">
    <div class="bg-red-500 w-1/3 p-4 ">
      test
    </div>

    <div class="bg-red-500 w-1/3 p-4 ">
      test
    </div>

    <div class="bg-red-500 w-1/3 p-4 ">
      test
    </div>
  </div>
</body>

</html>

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

background-clip CSSプロパティは、要素の背景が境界ボックス、パディングボックス、またはコンテンツボックスの下に広がるかどうかを設定します。

1
G-Cyrillus