CSSのフレックスレイアウトを使用して、要素が存在するかどうかに基づいて動的なレイアウト調整を実現する方法は？

CSSフレックスレイアウト：要素が存在するかどうかに応じてページを動的に調整します

多くの場合、Webページのレイアウトは、要素が表示されるかどうかに応じて動的に調整する必要があります。この記事では、CSSのフレックスレイアウトを使用してこの機能を実現する方法を示し、ページがさまざまな要素の組み合わせの下で優れたディスプレイ効果を維持できるようにします。

私たちの目標は、次の状況を満たすレイアウトを作成することです。

1. すべての要素が存在します： 「カードを開いてファイルの確立」が左側にあり、「外来充電」と「支払い」が右側に垂直に配置されます。
2. 「カードの開口部とファイルの確立」が欠落しています。 「外来患者の充電」と「支払い」が右側に垂直に配置されています。
3. 「外来充電」にはありません。 「カードを開いてファイルを確立する」が左側にあり、「支払い」が右側にあります。
4. 「支払い」がありません： 「カードを開き、ファイルを確立する」は左側にあり、「外来充電」が右側にあります。
5. 「オープンカードとファイルの確立」のみが残ります。 「オープンカードとファイル設立」のみが表示されます。

CSSのフレックスレイアウトを巧みに適用することにより、上記の効果を簡単に達成できます。次のコードは、それを実装する方法を示しています。

<div class="container">
  <div class="item left">カードを開いてファイルを構築します</div>
  <div class="item right">
    <div class="item sub-item">外来患者の充電</div>
    <div class="item sub-item">料金を支払います</div>
  </div>
</div>

。容器 {
  ディスプレイ：Flex;
}

。アイテム {
  /*デフォルトスタイルは、必要に応じて調整できます*/
  パディング：10px;
  ボーダー：1pxソリッド#ccc;
}

。左 {
  フレックス：1; /*空きスペースを取り上げる*/
}

。右 {
  フレックス：1; /*空きスペースを取り上げる*/
  ディスプレイ：Flex;
  フレックス方向：列; /*子要素は垂直に配置されます*/
  高さ：80px; /*右の高さを保証*/
}

.sub-item {
  フレックス：1; /*サブエレメントの高さ*/
}

/*隠された要素のスタイル*/
。隠れた {
  表示：なし;
}

JavaScriptを介してクラスの追加と削除を制御すると、要素を動的に非表示にすると、レイアウトが変更されます。たとえば、「外来患者の充電」要素が存在しない場合、 hiddenクラスを追加できます。フレックスレイアウトは、残りの要素の位置とサイズを自動的に調整します。これは、理解して維持しやすいシンプルで効率的な動的レイアウトソリューションです。

以上がCSSのフレックスレイアウトを使用して、要素が存在するかどうかに基づいて動的なレイアウト調整を実現する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。