CSS Flexbox を使用して 2 つの Div を並べて配置するにはどうすればよいですか?

CSS を使用して 2 つの Div を並べて配置する

Web 開発では、要素を並べて配置する必要があります。 CSS でこれを実現する 1 つの方法は、フレックスボックスを使用することです。

フレックスボックスのアプローチ

フレックスボックスを使用すると、要素を柔軟なグリッド状構造にレイアウトできます。 2 つの div を隣り合わせに配置するには:

1. 親コンテナを Flex に設定します: 親 div に display: flex を追加します。これにより、フレックスボックス レイアウトが有効になります。
2. 狭い Div を定義します: 幅 200 ピクセルである必要がある div の幅を 200 ピクセルに設定します。さらに、見やすくするためにスタイルを設定することもできます。
3. 左の Div が残りのスペースを埋めるようにします: 残りの div で flex: 1 を使用します。このプロパティは、親コンテナー内の残りの利用可能なスペースを占有するように div を拡張するようにブラウザーに指示します。

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 1;
  background: lightgreen;
}

<div>

このアプローチに従うことで、2 つの div を簡単に並べて配置できます。 1 つは固定幅で、もう 1 つは残りの画面スペースを埋めます。

以上がCSS Flexbox を使用して 2 つの Div を並べて配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。