[解決済み] フレックスコンテナ内の残りの高さまたは幅を埋める
質問
フレックスボックスで2つのdivを横に並べています。右側のdivは常に同じ幅で、左側のdivは残りのスペースを取得するようにしたいです。しかし、私がその幅を特別に設定しない限り、それはありません。
そのため、現時点では96%に設定されています。これは、画面を本当につぶすまでは問題ないように見えますが、そうすると、右側のdivは必要なスペースに少し窮することになります。
このままでもいいのですが、何か方法があるような気がします。
右はいつも同じで、左のあなたは左のものをすべて手に入れる。
.ar-course-nav {
cursor: pointer;
padding: 8px 12px 8px 12px;
border-radius: 8px;
}
.ar-course-nav:hover {
background-color: rgba(0, 0, 0, 0.1);
}
<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
<div style="width:96%;">
<div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
<strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
</strong>
</div>
<div style="width:100%; display:flex; justify-content:space-between;">
<div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
A really really really really really really really really really really really long department name
</div>
<div style="color:#555555; text-align:right; white-space:nowrap;">
Created: 21 September 2016
</div>
</div>
</div>
<div style="margin-left:8px;">
<strong>></strong>
</div>
</div>
解決方法は?
を使用します。
flex-grow
プロパティは、フレックスアイテムが空きスペースを消費するようにするためのものです。
主軸上に
.
このプロパティは、画面サイズの変更や他のアイテムの追加/削除などの動的な環境に応じて長さを調整し、可能な限りアイテムを拡張する。
よくある例としては
flex-grow: 1
または、短縮プロパティを使用します。
flex: 1
.
したがって、代わりに
width: 96%
を使用します。
flex: 1
.
と書かれていましたね。
今のところ、96%に設定されていますが、これは画面を本当につぶすまでは問題ないように見えます - そうすると、右側のdivに必要なスペースが少し欠けてしまいます。
固定幅のdivがつぶれるのは、別のflexプロパティに関係しています。
flex-shrink
デフォルトでは、フレックスアイテムは
flex-shrink: 1
コンテナからはみ出さないように縮小することができます。
この機能を無効にするには
flex-shrink: 0
.
詳細はこちらをご覧ください。
は
flex-shrink
因子
の部分は、こちらの回答でご確認ください。
フレックスアライメントについて詳しくは 主軸 をご覧ください。
フレックスアライメントについて、詳しくは 横軸 をご覧ください。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] HTML要素の実際の幅と高さを取得するにはどうすればよいですか?
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] 検索エンジンはAngularJSアプリケーションをどのように扱っているのか?
-
[解決済み] 残りの幅を埋めるためにdivを展開する
-
[解決済み] [Solved] 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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap 3.3.7で改行する方法
-
[解決済み] CSS - カーソルを置いたときに塗りつぶしの色を変更する - SVG PATH
-
[解決済み] HTMLのテーブルからボーダーを完全に削除する方法
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] HTMLにPDFを埋め込むおすすめの方法とは?
-
[解決済み] HTMLでBase64画像を表示する方法
-
[解決済み] フレックスアイテムを右寄せにするには?
-
[解決済み] preタグでテキストを折り返すにはどうしたらよいですか?
-
[解決済み] HTML5でminlengthの検証属性はありますか?