リスト項目の合計幅がCSSのみを使用してしきい値を超える場合、水平から垂直方向の配置への動的レイアウト変換を実装する方法は？

純粋なCSSは、リストアイテムレイアウトの動的変換を実装します：水平から垂直

多くのフロントエンド開発者は、リスト項目の総幅に基づいてリストのレイアウト方向を動的に調整する方法の課題に直面しています。たとえば、合計幅が特定のしきい値を超える場合、水平方向から垂直方向の配置に切り替えます。この記事では、CSSのみを使用してこの効果を達成する方法を示し、特定のケースを分析します。

順序付けられていないリストがあるとします<ul></ul>、複数を含む<li>要素、それぞれ<li>幅は固定されていません。すべて<li>要素の総幅が300ピクセルを超える場合、リストを水平から垂直に変換する必要があります。 CSSのフレックスボックスレイアウトを活用することで、この問題を簡単に解決できます。キーはflex-wrap: wrap;属性。このプロパティにより、要素はコンテナの境界に到達すると自動的にラップでき、滑らかな水平方向の垂直遷移が可能になります。

次のCSSコードは、この動的なレイアウト変換を実装する方法を示しています。

 * {
  パディング：0;
  マージン：0;
  ボックスサイズ：ボーダーボックス; /*要素の総幅内の内側のマージンと境界を含む*/
}

ul {
  ディスプレイ：Flex;
  フレックスラップ：ラップ;
  幅：300px;
  Max-Height：400px; /*コンテンツが溢れないように最大高さを設定します*/
  Overflow-y：auto; /*スクロールバーを追加して、余分な部品の表示を容易にします*/
}

li {
  フレックスグロー：1; /*プロジェクトが利用可能なスペースを占有できるようにします*/
  パディング：8px;
}

最初にこのコード<ul></ul>要素はフレックスコンテナに設定されており、 flex-wrap: wrap;リストアイテムが自動的にラップできるようにするプロパティ。 width: 300px;リストの総幅をしきい値として制限します。 max-height and overflow-y: auto設定された高さを超えたときにスクロールバーが表示されることを確認します。 flex-grow: 1;それぞれを確認してください<li>要素は、残りのスペースを同じ線に均等に分配します。 box-sizing: border-box;すべての要素に適用して、内側のマージンと境界が要素の総幅の計算に影響を与えないようにします。

いつ<li>要素の総幅が300ピクセルを超えると、次のラインに自動的にラップし、垂直方向の配置を達成します。この簡潔なCSSコードを使用すると、JavaScriptコードなしで水平から垂直への動的レイアウト変換を実装します。

以上がリスト項目の合計幅がCSSのみを使用してしきい値を超える場合、水平から垂直方向の配置への動的レイアウト変換を実装する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。