Flexbox 列で垂直方向のコンテンツを水平方向に整列させるにはどうすればよいですか?

フレックスボックスを使用して異なる親の子供の身長のバランスをとる

質問:

各列にさまざまな長さのコンテンツが含まれる 2 列レイアウトの場合、Bootstrap のモバイル最適化を損なうことなく、両方の列のリストが水平方向に整列した状態を維持するにはどうすればよいでしょうか?理想的には、ソリューションは Flexbox を活用し、JavaScript を避ける必要があります。

回答:

JavaScript を使用せずにこれを実現するには、すべてのコンテンツ項目 (見出し、段落、および

画面幅で列を並べて表示できる場合、適切な配置を維持するためにこれらの項目を並べ替える必要があります:

• メディア クエリ:

  <code class="css">@media (min-width: 768px) {
    // Flexbox rules
  }</code>

• フレックスボックス構成:

  <code class="css">.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .content > * {
    flex-basis: calc(50% - 30px); // Adjust for gutters
  }</code>

• 要素の順序:

  <code class="css">.content h2 { 
    order: 0; // Heading (row 1)
  }
  
  .content p { 
    order: 1; // Paragraphs (row 2)
  }
  
  .content p + p { 
    order: 2; // Second paragraph (row 3)
  }
  
  .content ul { 
    order: 3; // List (row 4)
  }</code>

考慮事項:

• 境界線:境界線を追加し、要素の境界線プロパティの組み合わせを使用し、さまざまなスタッキング構成を考慮してメディア クエリで調整します。

更新されたコード:

実際の例については、更新された codepen を参照してください:

[Codepen Link]

以上がFlexbox 列で垂直方向のコンテンツを水平方向に整列させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。