Flexbox での画像の位置合わせに関する問題と課題

Question

最近、自分で開発したホームページに取り組んでいますが、フレックスボックス内で項目を整列させるのに少し苦労しています。最初のフレックスボックスには 3 つの画像が含まれており、すべての画像が互いの下に縦一列に配置されている必要があります。これは 2 番目のフレックスボックスにとっても重要です。これは私のコードです: .flexcontainer-1{display:flex;justify-content:flex-start;align-items:left;height:auto;width:auto;

P粉795311321 · Answer

このレイアウトを実装するには複数の方法があります。CSS グリッド、フレックスボックス、および複数列レイアウトはすべて (さまざまな方法で) 機能します。

ただし、最初にお勧めするのは HTML を変更することです。意味的には、プロパティのリストを表示しているように見えますが、リスト (順序付きまたは順序なし) を使用する必要があることがすぐに示唆されます。私は、説明的なテキストと画像が存在する必要があることを提案します。図>要素。

このリビジョンでは、

タグ (または

、

...) でラップすると、上記の HTML は次のようになります:

  アンセア・イモビリアン
  
    
      
        
          
        
        子猫の画像を配置: 1
      
    
    
      
        
          
        
        子猫の画像を配置: 2
      
    
    
      
        
          
        
        子猫の画像を配置: 3
      
    
    
      
        
          
        
        子猫の画像を配置: 4
      
    
    
      
        
          
        
        子猫の画像を配置: 5
      
    
    
      
        
          
        
        子猫の画像を配置: 6

複数列レイアウトで使用し、CSS に説明コメントを追加します:

/* 共通のテーマを提供するために使用される CSS カスタム プロパティ
   複数の要素に: */
：根 {
  --commonSpacing: 1em;
}

/* デフォルトのマージンを削除するための単純な CSS リセット、
   そしてパディング。すべてのブラウザが確実に使用するようにする
   コンテンツに対して同じサイズ変更アルゴリズムを使用し、
   同じフォント サイズとフォント ファミリーを適用します: */
*、
 ：：前に、
 ：：後 {
  ボックスのサイズ設定: ボーダーボックス;
  フォントファミリー: システム UI;
  フォントサイズ: 16px;
  マージン: 0;
  パディング: 0;
}

/* 見出しを強調するには: */
h4 {
  フォントサイズ: 1.8em;
  マージンブロック: calc(0.5 * var(--commonSpacing));
  テキスト整列: 中央;
}

主要 {
  /* インライン軸のサイズを設定します (英語では幅、
     ラテン語) から 80 ビューポート幅単位まで、最小
     サイズは 30 root-em 単位、最大サイズは 1300 ピクセル: */
  インラインサイズ: クランプ(30rem、80vw、1300px);
  /* インライン軸上の要素を中心に配置します: */
  マージンインライン: 自動;
}

ウル {
  /* 複数列レイアウトを使用する、
     2 つの列を確保します: */
  列数: 2;
  /* デフォルトのリストマーカーを削除します: */
  リストスタイルタイプ: なし;
  /*  要素を中央に配置
  以内 ＃＃＃： */
  テキスト整列: 中央;
}

リ {
  /*  が存在しないことを確認します
     その内容は複数の列にまたがり、
     見苦しい孤児たちを置き去りにする
     列の終わりまたは始まり: */
  侵入：避ける。
  /* 要素の間隔を空ける: */
  マージンブロックエンド: var(--commonSpacing);
}


  アンセア・イモビリアン
  
    
      
        
          
        
        子猫の画像を配置: 1
      
    
    
      
        
          
        
        子猫の画像を配置: 2
      
    
    
      
        
          
        
        子猫の画像を配置: 3
      
    
    
      
        
          
        
        子猫の画像を配置: 4
      
    
    
      
        
          
        
        子猫の画像を配置: 5
      
    
    
      
        
          
        
        子猫の画像を配置: 6

JS Fiddle の実行例 .

これを行うには、CSS ネットワークを使用することもできます。ネットワークがある限り、その数字は左から右、そして上から下に流れます。

/* 共通のテーマを提供するために使用される CSS カスタム プロパティ
   複数の要素に: */
：根 {
  --commonSpacing: 1em;
}


/* デフォルトのマージンを削除するための単純な CSS リセット、
   そしてパディング。すべてのブラウザが確実に使用するようにする
   コンテンツに対して同じサイズ変更アルゴリズムを使用し、
   同じフォント サイズとフォント ファミリーを適用します: */
*、
：：前に、
：：後 {
  ボックスのサイズ設定: ボーダーボックス;
  フォントファミリー: システム UI;
  フォントサイズ: 16px;
  マージン: 0;
  パディング: 0;
}

主要 {
  /* インライン軸のサイズを設定します (英語では幅、
     ラテン語) から 80 ビューポート幅単位まで、最小
     サイズは 30 root-em 単位、最大サイズは 1300 ピクセル: */
  インラインサイズ: クランプ(30rem、80vw、1300px);
  /* インライン軸上の要素を中心に配置します: */
  マージンインライン: 自動;
}


/* 見出しを強調するには: */
h4 {
  フォントサイズ: 1.8em;
  マージンブロック: calc(0.5 * var(--commonSpacing));
  テキスト整列: 中央;
}

ウル {
  /* グリッド レイアウトを使用します: */
  表示: グリッド;
  /* 隣接する要素の間隔: */
  ギャップ: var(--commonSpacing);
  /* 2 つの列を定義し、それぞれが次の一部を受け取ります
     利用可能なスペース:*/
  グリッド テンプレート列:repeat(2, 1fr);
  リストスタイルタイプ: なし;
  テキスト整列: 中央;
}


  アンセア・イモビリアン
  
    
      
        
          
        
        子猫の画像を配置: 1
      
    
    
      
        
          
        
        子猫の画像を配置: 2
      
    
    
      
        
          
        
        子猫の画像を配置: 3
      
    
    
      
        
          
        
        子猫の画像を配置: 4
      
    
    
      
        
          
        
        子猫の画像を配置: 5
      
    
    
      
        
          
        
        子猫の画像を配置: 6

JS Fiddle の実行例 .

さらに、弹性布局を使用します:

/* 共通のテーマを提供するために使用される CSS カスタム プロパティ
   複数の要素に: */
：根 {
  --commonSpacing: 1em;
}


/* デフォルトのマージンを削除するための単純な CSS リセット、
   そしてパディング。すべてのブラウザが確実に使用するようにする
   コンテンツに対して同じサイズ変更アルゴリズムを使用し、
   同じフォント サイズとフォント ファミリーを適用します: */
*、
：：前に、
：：後 {
  ボックスのサイズ設定: ボーダーボックス;
  フォントファミリー: システム UI;
  フォントサイズ: 16px;
  マージン: 0;
  パディング: 0;
}

主要 {
  /* インライン軸のサイズを設定します (英語では幅、
     ラテン語) から 80 ビューポート幅単位まで、最小
     サイズは 30 root-em 単位、最大サイズは 1300 ピクセル: */
  インラインサイズ: クランプ(30rem、80vw、1300px);
  /* インライン軸上の要素を中心に配置します: */
  マージンインライン: 自動;
}


/* 見出しを強調するには: */
h4 {
  フォントサイズ: 1.8em;
  マージンブロック: calc(0.5 * var(--commonSpacing));
  テキスト整列: 中央;
}

ウル {
  /* フレックスボックス レイアウトを使用する: */
  ディスプレイ: フレックス;
  /* の省略形:
    フレックス方向: 行;
    フレックスラップ: ラップ; */
  フレックスフロー: 行の折り返し;
  /* 隣接する要素間のギャップを設定します: */
  ギャップ: var(--commonSpacing);
  /* デフォルトのリストマーカーを削除します: */
  リストスタイルタイプ: なし;
}

リ {
  /*  を拡張して占有することを許可します
     より多くの部屋: */
  フレックスグロー: 1;
  /* 要素のサイズを次のように設定します。
     親の 45%。フレックスベース
     常にフレックス項目のインライン軸を参照します。
     これは更新することで変更できます。
     親のフレックス方向: */
  フレックスベース: 45%;
  /* 
 内のコンテンツを中央揃えにします: */
  テキスト整列: 中央;
}


  アンセア・イモビリアン
  
    
      
        
          
        
        子猫の画像を配置: 1
      
    
    
      
        
          
        
        子猫の画像を配置: 2
      
    
    
      
        
          
        
        子猫の画像を配置: 3
      
    
    
      
        
          
        
        子猫の画像を配置: 4
      
    
    
      
        
          
        
        子猫の画像を配置: 5
      
    
    
      
        
          
        
        子猫の画像を配置: 6

JS Fiddle の実行例 .

参考文献：

ボックスのサイズ設定。
侵入#.
クランプ()。
列数.
CSS 独自のプロパティ .
CSS の属性プロパティ . ＃＃＃＃＃＃＃＃＃画面＃＃＃＃＃＃。＃＃＃
フレックスベース.
フレックス方向。
flex-grow.
フレックスフロー。
フレックスラップ。＃＃＃＃＃＃＃＃＃ギャップ＃＃＃＃＃＃。＃＃＃
グリッドテンプレート列 .
インラインサイズ.
リストスタイルタイプ .
マージンブロック。
マージンインライン。＃＃＃＃＃＃＃＃＃繰り返す（）＃＃＃＃＃＃。＃＃＃
text-align.
var().

P粉347804896 · Answer

最初のコンテナで h4 を使用しているようです。

この要素を flexcontainer-1 から取得します。

望ましい結果を達成するには、これを行う必要があります

＃＃＃。容器 { ディスプレイ: フレックス; ギャップ:10px; } 。アイテム { 高さ: 50ピクセル; 幅: 100ピクセル; 背景色: 青 } 。箱 { ディスプレイ: フレックス; フレックス方向: 列; ギャップ: 10px }

  
    ハウス 1
    
ハウス 2
    
ハウス 3
  
  
    ハウス 4
    
ハウス5
    
ハウス6