【CSS】display:flexの使い方

「display: flex」は、要素をフレックスボックスレイアウトにするために使用されます。このレイアウトは、子要素を横並びや縦並びに配置することができるようになります。使用方法について説明します。

1.HTML要素に「display: flex」を適用する

<div style="display: flex;">
  <p>子要素1</p>
  <p>子要素2</p>
  <p>子要素3</p>
</div>

2.CSSファイルに「display: flex」を適用する

div {
  display: flex;
}

これにより、「div」要素に対して、フレックスボックスレイアウトが適用され、子要素が横並びになります。

「display: flex」には、さらに詳細な設定があり、子要素の配置や揃え方、スタイルを調整することができます。例えば、「justify-content」プロパティを使用して、子要素の水平方向の配置を調整することができます。「align-items」プロパティを使用して、子要素の縦方向の配置を調整することができます。

また、「flex-wrap」プロパティを使用することで、子要素が横幅いっぱいになった場合の折り返しの有無を設定することができます。

例えば、「justify-content: center;」を指定することで、子要素を中央に揃えることができ、「align-items: center;」を指定することで、子要素を縦中央に揃えることができます。

以上のように、「display: flex」を使用することで、子要素を簡単に横並びや縦並びに配置することができるので、レスポンシブデザインやアイデア次第で様々なデザインを実現することができます。