CSS Flex レイアウトの詳細な指導

Flex Layout は、応答性の高い柔軟なレイアウトをより簡単に作成できる強力な CSS レイアウトモデルです。この記事では、Flex レイアウトの基本概念、プロパティ、サンプルコードを紹介します。

フレックスレイアウトとは何ですか?

Flex Layout は、コンテナおよびアイテムベースのレイアウトモデルです。コンテナはフレックスレイアウトが適用される親要素であり、アイテムはコンテナ内の子要素です。コンテナのプロパティを設定することで、コンテナ内のアイテムの配置、配置、スペース割り当てを制御できます。

フレックスレイアウトの使い方は？

displayフレックスレイアウトを使用するには、まずコンテナのプロパティをflexまたはに設定する必要がありますinline-flex。これにより、コンテナがフレックスコンテナになり、フレックスレイアウトが有効になります。

.container {
    
    
  display: flex;
}

フレックスコンテナのプロパティ

一般的に使用されるフレックスコンテナーのプロパティをいくつか示します。

flex-direction：項目の配置方向を指定します。デフォルト値はでrow、水平配置を示します。他の可能な値はcolumn、(垂直方向に整列)、row-reverse(水平方向に反転して整列)、およびcolumn-reverse(垂直方向に反転して整列) です。

.container {
    
    
  flex-direction: row;
}

flex-wrap: アイテムを折り返すかどうかを指定します。デフォルト値はですnowrap。これは改行がないことを意味します。他の可能な値はwrap(改行) とwrap-reverse(反転改行) です。

.container {
    
    
  flex-wrap: wrap;
}

justify-content: 主軸上の項目の配置を指定します。デフォルトはでflex-start、左揃えを意味します。その他の可能な値はflex-end、(右揃え)、center(中央揃え)、space-between(項目間を等間隔で揃えて配置)、space-around(各項目の両側に等間隔) です。

.container {
    
    
  justify-content: center;
}

align-items: 交差軸上の項目の配置を指定します。デフォルトはですstretch。これはストレッチフィルを意味します。他の可能な値はflex-start、(上揃え)、flex-end(下揃え)、center(中央揃え) です。

.container {
    
    
  align-items: center;
}

align-content: 交差軸上の複数行アイテムの配置を指定します。デフォルトはですstretch。これはストレッチフィルを意味します。その他の可能な値は、flex-start(上揃え)、flex-end(下揃え)、center(中央揃え)、space-between(行間を等間隔で揃える)、space-around(各行の両側に等間隔) です。

.container {
    
    
  align-content: center;
}

フレックスアイテムのプロパティ

一般的に使用されるフレックス項目のプロパティをいくつか示します。

flex-grow：項目の拡大率を指定します。デフォルト値はです0。これはズームインしないことを意味します。正の数に設定すると、項目が拡大されます。

.item {
    
    
  flex-grow: 1;
}

flex-shrink：項目の縮小率を指定します。デフォルト値はです1。これは、ズームアウトできることを意味します。に設定する0と、アイテムは縮小されません。

.item {
    
    
  flex-shrink: 0;
}

flex-basis: アイテムの初期サイズを指定します。デフォルト値はですauto。これは、サイズがアイテムの内容に基づいて自動的に計算されることを示します。特定の値またはパーセンテージに設定できます。

.item {
    
    
  flex-basis: 50%;
}

flex: はflex-grow、flex-shrinkおよびの短縮形ですflex-basis。デフォルト値はです0 1 auto。

.item {
    
    
  flex: 1 0 50%;
}

align-self: コンテナのalign-itemsプロパティをオーバーライドして、交差軸上の個々の項目の配置を指定します。

.item {
    
    
  align-self: flex-start;
}

サンプルコード

単純な flex レイアウトの例を次に示します。

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

.container {
    
    
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.item {
    
    
  flex: 1 0 25%;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

この例では、コンテナーはフレックスレイアウトに設定されており、項目は水平方向に中央揃えで配置されています。各項目のサイズはコンテナの幅の 25%、高さは 100 ピクセル、背景色は灰色、項目間のギャップは 10 ピクセルです。

結論は

Flex Layout は、応答性が高く柔軟なレイアウトをより簡単に作成できる強力な CSS レイアウトモデルです。コンテナーとアイテムのプロパティを設定することで、アイテムの配置、整列、および間隔を制御できます。この記事が Flex レイアウトの理解と使用に役立つことを願っています。