ホームページ >ウェブフロントエンド >CSSチュートリアル >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 つのオプションの値があります。
コード例:
.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 つのオプションの値があります。
コード例:
.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 つのオプションの値があります。
コード例:
.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 サイトの他の関連記事を参照してください。