モバイル端末開発におけるCSS Flex Elastic Layoutの適用について詳しく解説-CSSチュートリアル-php.cn

モバイル端末開発におけるCSS Flex Elastic Layoutの適用について詳しく解説

王林

リリース： 2023-09-27 16:55:48

オリジナル

1005 人が閲覧しました

详解Css Flex 弹性布局在移动端开发中的应用

モバイル開発における Css Flex エラスティックレイアウトの適用の詳細説明

モバイルデバイスの普及と多様化の時代、レスポンシブデザインが Web の標準になりました開発標準。 CSS Flex エラスティックレイアウトは、レスポンシブデザインソリューションとして、さまざまな画面サイズやデバイスの向きの変化にうまく適応できるため、モバイル開発で広く使用されています。

CSS Flex Flexible Layout とは
CSS Flex Flexible Layout は、CSS3 によって導入されたレイアウト方法であり、コンテナ内のサブ要素を特定の比率と規則に従って配置することができます。要素のサイズと位置を自動的に調整して、さまざまなレイアウト環境に適応できます。柔軟なレイアウトは、コンテナーにいくつかの特定のプロパティと値を設定することで機能します。
フレキシブルコンテナとフレキシブルサブ要素
フレキシブルレイアウトには、フレキシブルコンテナとフレキシブルサブ要素という 2 つの重要な概念があります。

フレキシブルコンテナ: コンテナの表示プロパティを flex または inline-flex に設定して、フレキシブルコンテナを作成します。フレキシブルコンテナの子要素は、特定のルールに従って配置および調整されます。

フレキシブルサブ要素: フレキシブルコンテナ内の各サブ要素はフレキシブルサブ要素です。フレキシブルなサブ要素ごとに、いくつかの特定のプロパティを設定することで、フレキシブルコンテナ内でのパフォーマンスを制御できます。

フレキシブルコンテナの共通プロパティ

フレキシブルコンテナの一般的に使用されるプロパティは次のとおりです:

flex-direction: 子要素をフレキシブルコンテナの配置方向、オプション値には、row（水平配置、デフォルト値）、row-reverse（水平反転配置）、column（垂直配置）、column-reverse（垂直反転配置）があります。

justify-content: 主軸に沿ったフレキシブルコンテナ内の子要素の配置を設定するために使用されます。オプションの値には、flex-start (開始位置揃え、デフォルト値)、flex-end (終了位置揃え) が含まれます、center (中央揃え)、space-between (両端揃え、サブ要素間の等間隔)、space-around (サブ要素間の等間隔)。

align-items: フレキシブルコンテナ内の子要素の横軸 (主軸に垂直な軸) に沿った配置を設定するために使用されます。オプションの値には、flex-start (開始位置の配置)、flex が含まれます-end (終了位置揃え)、center (中央位置揃え)、baseline (ベースライン位置合わせ、子要素のベースライン位置合わせ)、stretch (ストレッチ位置合わせ、子要素はコンテナに合わせて引き伸ばされます)。

align-content: フレキシブルコンテナ内の複数行のサブ要素の交差軸上の配置を設定するために使用されます。フレキシブルコンテナに複数行のサブ要素がある場合にのみ有効です。オプションの値には、flex-start (開始位置合わせ)、flex-end (終了位置合わせ)、center (中央位置合わせ)、space-between (両端の位置合わせ、行間の等間隔)、space-around (行間) 等が含まれます。 spacing (各行の両側の間隔は行間隔の 2 倍)、stretch (配置を引き伸ばし、子要素はコンテナに合わせて引き伸ばされます)。

elastic サブ要素の共通属性

elastic サブ要素の一般的に使用される属性は次のとおりです:

flex-basis: 設定に使用されます。フレキシブルコンテナーの初期サイズには、特定の値 (px など) または相対値 (パーセンテージなど) を指定できます。デフォルト値は auto です。 auto に設定すると、子要素はコンテンツに基づいて自動的に拡張または縮小されます。

flex-grow: フレキシブルサブ要素の拡大率を設定するために使用されます。これにより、フレキシブルコンテナ内でサブ要素が占めるスペースのサイズが決まります。デフォルト値は 0 で、ズームインしないことを意味します。

flex-shrink: 弾性サブ要素の縮小率を設定するために使用されます。これにより、フレキシブルコンテナ内で収縮するサブ要素のサイズが決まります。デフォルト値は 1 で、これはズームアウトを意味します。

flex: flex-grow、flex-shrink、および flex-basis の略語プロパティを設定するために使用されます。たとえば、 flex: 1 1 auto; は、子要素を拡大または縮小でき、フレキシブルコンテナの初期サイズが auto であることを意味します。

align-self: フレキシブルコンテナの align-items 属性をオーバーライドし、単一の子要素の交差軸の配置を設定するために使用されます。

サンプルコード

次のサンプルコードは、伸縮性のあるレイアウトを使用して、モバイル開発で一般的な等幅の水平配置と垂直方向の中央揃えレイアウトを実装する方法を示しています。

HTML コード:

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

ログイン後にコピー

CSS コード:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  text-align: center;
  background-color: #ccc;
  margin: 0 10px;
  padding: 10px;
}

ログイン後にコピー

上記のコードでは、コンテナーは表示属性を flex に設定します。これは、フレキシブルコンテナーを作成することを意味します。同時に子要素の横方向の配置をjustify-content属性でspace-betweenに設定し、子要素が横方向に等幅で配置され、子要素間の間隔が等しくなるようにします。 align-items 属性によって子要素の垂直方向の配置を中央揃えに設定し、子要素が垂直方向の中央に配置されるようにします。

各子要素の flex 属性は 1 に設定されているため、子要素はフレキシブルコンテナのスペースを同じ幅で占有することができます。同時に、レイアウト効果をより適切に示すために、背景色、マージン、パディングなどのいくつかの基本スタイルが設定されます。

上記の例を通じて、CSS Flex エラスティックレイアウトを使用すると、さまざまな一般的なレイアウト要件を簡単かつ効率的に実現でき、特にモバイル端末開発に適していることがわかります。等幅の水平配置、垂直方向のセンタリング、またはその他のより複雑なレイアウトであっても、Flex レイアウトは簡単に処理でき、開発効率を向上させます。

概要
CSS Flex フレキシブルレイアウトは、モバイル開発で広く使用されているレイアウト方法です。フレキシブルコンテナとフレキシブルサブ要素のプロパティを設定することで、さまざまなレスポンシブレイアウト効果を実現できます。上記の記事では、フレキシブルコンテナとフレキシブルサブ要素の一般的に使用されるプロパティと値をいくつか示し、同時にフレキシブルレイアウトを使用して等幅の水平配置と垂直方向の中央揃えレイアウトを実現する方法をサンプルコードを通じて示しています。モバイル開発に CSS Flex エラスティックレイアウトを適用する際に、読者に何らかの助けを提供できればと思っています。

以上がモバイル端末開発におけるCSS Flex Elastic Layoutの適用について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。