CSSでコンテナ要素の残りの幅を埋めるにはどうすればよいですか?

残りのコンテナ幅を CSS で埋める

Web デザインの領域では、多くの場合、コンテナ要素内の残りのスペースを埋めることが重要です。 。これは、画面の一部を占めるヘッダーやナビゲーション バーを作成する場合に特に役立ちます。 CSS を使用してこれを実現する方法を見てみましょう。

次のコード スニペットを考えてみましょう。

<code class="html"><header>
  <img src="image.jpg" />
  <div id="middle">Middle Element</div>
  <div id="right">Right Element</div>
</header></code>

<code class="css">header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
}</code>

ご覧のとおり、ID が「middle」の div は埋められることが期待されています。ヘッダーバーの残りのスペース。 CSS を使用してこれを実現しましょう:

<code class="css">#middle {
  flex: 1; /* New code */
}</code>

flex: 1 を追加すると、制約を尊重しながら可能な限り多くのスペースを占有するこの要素に柔軟なサイズ設定スキームを使用するようにブラウザーに指示します。

追加メモ:

• calc() 関数を使用して、CSS 値に対して数学的演算を実行できます。この場合、calc(100% - 100px) は、左の div が 100px を占めた後のコンテナの残りの幅を計算します。
• あるいは、外側の要素に font-size: 0 を設定して、すべての要素を削除することもできます。インライン要素間の空白。

以上がCSSでコンテナ要素の残りの幅を埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。