CSS Flex Elastic Layoutの各属性の使い方と効果を詳しく解説

CSS Flex フレキシブル レイアウトの各属性の使用法と効果の詳細な説明

Web 開発では、フレキシブル レイアウト (Flexbox) が一般的に使用されるレイアウト方法になりました。コンテナ内の要素の配置とレイアウトの問題を効果的に解決できるため、Web ページがさまざまな画面サイズでも良好な効果を発揮できます。この記事では、CSS Flex Elastic Layout における各属性の使用法と効果について詳しく説明します。

1. flex-direction 属性

flex-direction 属性は、フレキシブル コンテナーの主軸の方向を設定するために使用されます。主軸は、フレックス コンテナー内の水平方向または垂直方向を指します。 flex-direction 属性には、row、row-reverse、column、column-reverse の 4 つのオプションの値があります。

1. 行: デフォルト値。主軸は水平で、サブ要素は水平に配置されます。
2. row-reverse: 主軸は水平であり、サブ要素は逆の順序で水平に配置されます。
3. 列: 主軸は垂直であり、サブ要素は垂直に配置されます。
4. column-reverse: 主軸は垂直方向で、サブ要素は垂直方向に逆順に配置されます。

コード例:

.container {
  display: flex;
  flex-direction: row; /* 主轴为水平方向，子元素水平排列 */
}

.container-reverse {
  display: flex;
  flex-direction: row-reverse; /* 主轴为水平方向，子元素水平反向排列 */
}

.container-column {
  display: flex;
  flex-direction: column; /* 主轴为垂直方向，子元素垂直排列 */
}

.container-column-reverse {
  display: flex;
  flex-direction: column-reverse; /* 主轴为垂直方向，子元素垂直反向排列 */
}

2. Justify-content 属性

justify-content 属性は、エラスティック コンテナ内のサブ要素の配置を設定するために使用されます。主軸にあります。これには、flex-start、flex-end、center、space-between、space-around の 5 つのオプションの値があります。

1. flex-start: 子要素は主軸の開始点に揃えられます。
2. flex-end: 子要素は主軸の端に揃えられます。
3. center: 子要素は主軸の中心に配置されます。
4. space-between: 子要素は主軸上に均等に配置され、先頭と末尾の間にスペースはありません。
5. space-around: 子要素は主軸上に均等に配置され、先頭と末尾にギャップがあります。

コード例:

.container {
  display: flex;
  justify-content: flex-start; /* 子元素在主轴起点对齐 */
}

.container-end {
  display: flex;
  justify-content: flex-end; /* 子元素在主轴终点对齐 */
}

.container-center {
  display: flex;
  justify-content: center; /* 子元素在主轴中心对齐 */
}

.container-between {
  display: flex;
  justify-content: space-between; /* 子元素在主轴上均匀分布，首尾没有间隔 */
}

.container-around {
  display: flex;
  justify-content: space-around; /* 子元素在主轴上均匀分布，首尾有间隔 */
}

3. align-items 属性

align-items 属性は、フレキシブル コンテナ内のサブ要素の配置を設定するために使用されます。交差軸上にあります。交差軸は主軸に垂直な軸です。 align-items 属性には、flex-start、flex-end、center、baseline、stretch の 5 つのオプションの値があります。

1. flex-start: 子要素は交差軸の開始点に位置合わせされます。
2. flex-end: 子要素は交差軸の端に揃えられます。
3. center: 子要素は交差軸の中心に配置されます。
4. baseline: 子要素はベースラインに揃えられます。
5. stretch: 子要素は、交差軸全体を満たすように伸縮します。

コード例:

.container {
  display: flex;
  align-items: flex-start; /* 子元素在交叉轴起点对齐 */
}

.container-end {
  display: flex;
  align-items: flex-end; /* 子元素在交叉轴终点对齐 */
}

.container-center {
  display: flex;
  align-items: center; /* 子元素在交叉轴中心对齐 */
}

.container-baseline {
  display: flex;
  align-items: baseline; /* 子元素以基线对齐 */
}

.container-stretch {
  display: flex;
  align-items: stretch; /* 子元素拉伸填满整个交叉轴 */
}

4. flex-grow 属性

flex-grow 属性は、フレキシブル コンテナ内の子要素が残りのスペース。子要素の拡大率を指定します。デフォルトは 0 です。

コード例:

.item {
  flex-grow: 1; /* 子元素1放大比例为1 */
}

.item2 {
  flex-grow: 2; /* 子元素2放大比例为2 */
}

flex-shrink プロパティ

flex-shrink プロパティは、スペースが不十分な場合にエラスティック コンテナ内の子要素を縮小する方法を設定するために使用されます。子要素の縮小率を指定します。デフォルトは 1 です。

コード例:

.item {
  flex-shrink: 1; /* 子元素1收缩比例为1 */
}

.item2 {
  flex-shrink: 2; /* 子元素2收缩比例为2 */
}

概要:

この記事では、flex-direction、justify-content など、CSS Flex elastic レイアウトの各属性の使用法と効果について詳しく説明します。 , align-items、flex-grow、flex-shrink などのプロパティ。これらの属性の使用法をマスターすると、フレキシブル コンテナ内のサブ要素を柔軟にレイアウトして、さまざまなページ レイアウト効果を実現できます。この記事がお役に立てば幸いです。

以上がCSS Flex Elastic Layoutの各属性の使い方と効果を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。