[解決済み] フレックスアイテムが行の幅いっぱいに広がるようにする
2022-10-17 17:15:17
質問
フレックスを使いながら、最初の2つの子要素を同じ行に保持し、3つ目の要素はそれ自身の下に全幅で配置しようと思っています。
私は特に
flex-grow
と
flex-shrink
プロパティを最初の 2 つの要素に追加しました (これがパーセンテージを使用しない理由の 1 つです) が、3 番目の要素は本当にフル幅で最初の 2 つの要素より下になければなりません。
その
label
要素の後にプログラムによって追加されます。
text
要素の後にプログラム的に追加されるのですが、エラーが発生してコードを変更することができません。
label要素がflexを使って配置されている他の2つの要素の下に100%の幅で広がるようにするにはどうすればよいでしょうか。
.parent {
display: flex;
align-items: center;
width: 100%;
background-color: #ececec;
}
.parent * {
width: 100%;
}
.parent #text {
min-width: 75px;
flex-shrink: 2.25;
}
<div class="parent">
<input type="range" id="range">
<input type="text" id="text">
<label class="error">Error message</label>
</div>
どのように解決するのですか?
フレックスアイテムが行全体を占めるようにしたい場合、そのアイテムに
width: 100%
または
flex-basis: 100%
を有効にし
wrap
をコンテナ上で有効にします。
アイテムは利用可能なスペースをすべて消費するようになりました。兄弟は他の行に強制的に移動させられます。
.parent {
display: flex;
flex-wrap: wrap;
}
#range, #text {
flex: 1;
}
.error {
flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
border: 1px dashed black;
}
<div class="parent">
<input type="range" id="range">
<input type="text" id="text">
<label class="error">Error message (takes full width)</label>
</div>
詳細はこちら。
の初期値は
flex-wrap
プロパティは
nowrap
のように、すべての項目が一列に並ぶことを意味します。
MDN
関連
-
[解決済み] HTMLで複数選択を許さないリストボックスを作るには?
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] フレックスアイテムを右寄せにするには?
-
[解決済み] テーブル内のテキストアラインクラス
-
[解決済み] Webサイトのブラウザタブアイコン(ファビコン)を追加する方法を教えてください。
-
[解決済み] HTML5 CanvasとSVGとdivの比較
-
[解決済み] フレックスボックス 最後の行をグリッドに揃える
-
[解決済み] DIVのディメンションが変更されたことを検出する方法は?
-
[解決済み】フレックスベースとワイドの違いは何ですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HTMLにおける'"'エンティティの使用法
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] クリアフィックスとは何ですか?
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] 静的な HTML ページにファビコンを追加する
-
[解決済み] テーブル内のテキストアラインクラス
-
[解決済み] Zalgoテキストはどのように機能しますか?
-
[解決済み] マークダウンにおける相互参照 (名前付きアンカー)