[解決済み] フレックスボックスのアイテム間の距離を設定するためのより良い方法
2022-03-18 13:54:50
質問
フレックスボックスのアイテム間の最小距離を設定するために
margin: 0 5px
について
.item
と
margin: 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>
関連
-
[CSSチュートリアル]z-indexの違い。cssのz-index: 0とz-index: autoの違い。
-
[CSSチュートリアル】CSSで2カラムレイアウトを実現するN種類のメソッド
-
[CSSチュートリアル】背景-位置の割合の原則の説明
-
[CSSチュートリアル】CSSでemを開く正しい方法 詳細へ
-
[CSSチュートリアル】cssフレックスレイアウト ロング自動改行サンプルコード
-
[CSSチュートリアル】CSSで実現するイメージマッピングメソッド
-
[解決済み] フレックスボックス 1列4点
-
[解決済み] CSS Flexboxで、"justify-items "と "justify-self "プロパティはなぜないのですか?
-
[解決済み] フレックスボックス 最後の行をグリッドに揃える
-
[解決済み】カラムモードでフレックスボックスのアイテムが折り返されるとき、コンテナの幅が大きくならない。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル]CSSで簡単!高周波な異形ボタンを実現する方法
-
[CSSチュートリアル】Pure CSSカスタム複数行抜け問題(原理から実装まで)
-
[CSSチュートリアル]CSSは、2列のレイアウト、固定幅の左側、適応するためのさまざまな方法の右側を達成するために
-
[CSSチュートリアル】CSSのfloatとunfloatについて
-
[CSSチュートリアル】CSS擬似要素::マーカー解説
-
[CSSチュートリアル】CSSのシングルDivの描画スキル
-
[CSSチュートリアル】波動効果を生み出すCSSのアイデア
-
[CSSチュートリアル]css display table adaptive height, widthの問題解決
-
[CSSチュートリアル】CSSでemを開く正しい方法 詳細へ
-
[CSSチュートリアル】ネイティブCSSでテキストの無制限回転を実現する汎用的な方法