JavaScript を使用せずにレスポンシブ行の配置を維持する方法

応答行の兄弟の高さを維持する

さまざまなコンテンツの長さを含む列があり、JavaScript を使用して列内の位置合わせを維持したい場合必要ありません。 CSS を変更することで、モバイルの最適化を損なうことなく、目的の機能を満たす柔軟なレイアウトを作成できます。

重要なのは、各列の項目を直接兄弟にし、相互に「認識」できるようにすることです。次に、メディア クエリを使用して、画面幅に基づいて順序を並べ替えます。これにより、幅の広い画面ではアイテムが横に並び、狭い画面では垂直に積み重ねられるようになります。

更新されたコード:

これを実現するには、各列内のすべての要素をラップするコンテンツ クラスを導入します:

<code class="css">.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}</code>

コンテンツ内の個々の要素にはカスタム幅が与えられます:

<code class="css">.content > * {
  flex-basis: calc(50% - 30px);
}</code>

メディア クエリ:

より広い画面の場合は、メディア クエリを使用して要素を並べ替え、幅を調整します:

<code class="css">@media (min-width: 768px) {
  .content h2 {
    /*  1st row  */
    order: 0;
  }

  .content p {
    /*  2nd row  */
    order: 1;
  }

  .content p + p {
    /*  3rd row  */
    order: 2;
    flex-basis: calc(100% - 30px);
  }

  .content ul {
    /*  4th row  */
    order: 3;
  }
}</code>

補足:

• 画面サイズに応じて、メディア クエリ ブレークポイントとフレックス ベースの値を調整する必要がある場合があります。
• 要素の高さの違いを考慮して、追加のメディア クエリを使用して個々の要素に境界線プロパティを適用できます。

以上がJavaScript を使用せずにレスポンシブ行の配置を維持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。