[解決済み] 1行に3列表示させるには？
2023-03-09 02:40:53
質問
1行に3列表示させようとしています。フレックスボックスを使って可能でしょうか？
現在の私のCSSはこのようなものです。
.mainDiv {
display: flex;
margin-left: 221px;
margin-top: 43px;
}
このコードでは、すべてのコンテンツを1つの行に配置しています。 私は1行につき3つのレコードを表示するだけの制約を加えたいのです。
どのように解決するのですか？
これはあなたが探しているものであるかもしれません。
body>div {
background: #aaa;
display: flex;
flex-wrap: wrap;
}
body>div>div {
flex-grow: 1;
width: 33%;
height: 100px;
}
body>div>div:nth-child(even) {
background: #23a;
}
body>div>div:nth-child(odd) {
background: #49b;
}
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
関連
-
[解決済み] フレックスボックス 1列4点
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか？
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか？
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] CSSコンテンツによるHTMLエンティティの追加
-
[解決済み] divブロック内のテキストを（水平方向と垂直方向に）センタリングするにはどうすればよいですか？
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか？
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか？
-
[解決済み] Flexboxの子の高さを親の高さの100％にするには？
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
document.forms 使用方法
-
[解決済み] <html xmlns="http://www.w3.org/1999/xhtml">」は何をするものですか？
-
[解決済み] HTMLで複数選択を許さないリストボックスを作るには？
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか？
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか？
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか？
-
[解決済み] クリアフィックスとは何ですか？
-
[解決済み] 静的な HTML ページにファビコンを追加する
-
[解決済み] HTML5でminlengthの検証属性はありますか？