上と下に画像とテキストを含むメニューシステムを作成しようとしています。データは動的です。メニューシステムを表示して、各画像が他の画像から等距離になり、水平方向と垂直方向の両方で画像のグリッドに整列するようにしたいと考えています。
問題はテキストです。テキストが画像より長い場合、divは拡大されます。ただし、画像が互いに等間隔に配置されなくなるため、見苦しいギャップが生じます。
これを回避するための最善の方法は、他の各divに大きいdivのサイズを採用させることだと思います。ただし、これをどのように行うかはわかりません。
flex-wrapプロパティを使用してflexboxで試しました。うまく折り返していますが、各画像を等距離で並べる方法を見つけることができませんでした。
これを達成するにはどうすればよいですか？
私のコードは次のとおりです：
#outer {
display: flex;
}
#main {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border: solid black 25px;
border-radius: 25px;
width: 450px;
height: 500px;
padding: 20px;
}
.section {
background-color: #ddd;
padding: 15px;
}
.label, .icon {
text-align: center;
}<div id="outer">
<div id="main">
<div class="section">
<div class="label">Label 1AAAAAAAAAAA</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 1B</div>
</div>
<div class="section">
<div class="label">Label 2A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 2B</div>
</div>
<div class="section">
<div class="label">Label 3A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 3B</div>
</div>
<div class="section">
<div class="label">Label 4A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 4B</div>
</div>
<div class="section">
<div class="label">Label 5A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 5B</div>
</div>
</div>
</div>PS。セクションdivの高さが増加している理由もわかりません。したがって、これに関する洞察もいただければ幸いです。
2
グリッドはあなたが探しているものだと思います。
—
Siraj Alam、
アイテムの高さが増加する理由は、デフォルトでに
—
アルトゥルNoetzel
align-items設定さstretchれているためです。あなたは簡単に変更することができる：align-items: flex-start;
現在の＃メインの幅は450pxです。セクションの動的コンテンツが、たとえば、350px、それらすべてが新しい行を形成していませんか？それでいいの？
—
Gosi
@ゴシ、はい、それが私が望んでいることです。
—
kojow7
ブートストラップ4クラスを使用できます。試しましたか？
—
Revti Shah