Flexbox 對齊影像的問題與挑戰

Question

我最近一直在開發自己開發的主頁，並且在彈性盒中對齊我的專案時遇到一些困難。第一張 Flexbox 應包含三 (3) 張圖片，且所有圖片應位於彼此下方的一條垂直線上。

這對我的第二個彈性盒也很重要。

這是我的程式碼：

.flexcontainer-1 {
  display: flex;
  justify-content: flex-start;
  align-items: left;
  height: auto;
  width: auto;
}

.flexcontainer-2 {
  display: flex;
  justify-content: flex-end;
  align-items: right;
  height: auto;
  width: auto;
}

<div class="flexcontainer-1">
  <!-- Übersicht über alle Immobilien mit entsprechenden Bildern -->
  <h4>Unsere Immobilien</h4>
  <!-- Weiterleitung über Anchor innerhalb des Images zu Einzelbeschreibung, -->
  <!-- Übergabe der ID aus Datenbank in den Anchor -->
  <p>
    <a href="db_immobilien_desc_b.php?id=2">
      <img src="../images/haus2.jpg" alt="Beschreibung Haus2"></a>
  </p>
  <p>
    <a href="db_immobilien_desc_b.php?id=3">
      <img src="../images/haus3.jpg" alt="Beschreibung Haus3"></a>
  </p>
  <p>
    <a href="db_immobilien_desc_b.php?id=4">
      <img src="../images/haus4.jpg" alt="Beschreibung Haus4"></a>
  </p>
</div>
<div class="flexcontainer-2">
  <p>
    <a href="db_immobilien_desc_b.php?id=5">
      <img src="../images/haus5.jpg" alt="Beschreibung Haus5"></a>
  </p>
  <p>
    <a href="db_immobilien_desc_b.php?id=6">
      <img src="../images/haus6.jpg" alt="Beschreibung Haus6"></a>
  </p>
  <p>
    <a href="db_immobilien_desc_b.php?id=7">
      <img src="../images/haus7.jpg" alt="Beschreibung Haus6"></a>
  </p>
</div>

它總是在圖片的第二次對齊中產生間隙，不幸的是我還沒有找到解決這個問題的解決方案。

我非常感謝提示或建議，以及如何改進我的編碼。

提前非常感謝您。

親切的問候，

盧克

我嘗試過使用屬性 justifiy-content 和 align-items，但這對我來說不起作用。

Answer 1

有多種方法可以實現此佈局，CSS 網格、Flexbox 和多列佈局都可以（以不同的方式）。

不過，我建議的第一件事就是修改 HTML。從語義上講，您似乎正在顯示一個屬性列表，這立即表明應該使用一個列表（無論是有序列表還是無序列表）；我建議應該有描述性文字和圖像，這反過來又表明可以使用<figure> 元素。

透過此修訂，一旦包裝在<main> 標記（或<section>、<article>...）中，上述HTML 可能會變成如下圖：

  
Unsere Immobilien
  

    

      

        
          
        
        
PlaceKitten image: 1
      
    
    

      

        
          
        
        
PlaceKitten image: 2
      
    
    

      

        
          
        
        
PlaceKitten image: 3
      
    
    

      

        
          
        
        
PlaceKitten image: 4
      
    
    

      

        
          
        
        
PlaceKitten image: 5
      
    
    

      

        
          
        
        
PlaceKitten image: 6
      
    
  

將其與多列佈局一起使用，並在 CSS 中添加解釋性註解：

/* 用於提供通用主題的 CSS 自訂屬性
   多重元素：*/
：根 {
  --common間距：1em；
}

/* 一個簡單的 CSS 重設以刪除預設邊距，
   和填充物；確保所有瀏覽器都使用
   內容的大小調整演算法相同，且
   套用相同的字體大小和字體系列：*/
*,
 ：：前，
 ：：後 {
  框大小：邊框框；
  字體系列：系統使用者介面；
  字體大小：16px；
  保證金：0；
  填充：0；
}

/* 強調標題: */
h4 {
  字體大小：1.8em；
  邊距塊： calc(0.5 * var(--commonSpacing));
  文字對齊：居中；
}

主要的 {
  /* 設定內聯軸的大小（寬度，英文和
     拉丁語）至 80 個視口寬度單位，最小
     大小為 30 root-em 單位，最大大小為 1300 像素：*/
  內聯尺寸：夾子（30rem，80vw，1300px）；
  /* 使元素在內聯軸上居中: */
  內聯邊距：自動；
}

ul {
  /* 使用多列佈局，
     確保兩列：*/
  列數：2；
  /* 刪除預設清單標記: */
  清單樣式類型：無；
  /* 將 
 元素置中
  在
內：*/
  文字對齊：居中；
}

李{
  /* 確保 
 沒有
     它的內容分佈在各個列中，
     留下難看的孤兒
     列的結尾或開頭：*/
  闖入的：避免；
  /* 元素間隔： */
  邊距塊結束：var(--commonSpacing);
}

#
  
Unsere Immobilien
  

    

      

        
          
        
        
PlaceKitten 圖片：1
      
    
    

      

        
          
        
        
PlaceKitten 圖片：2
      
    
    

      

        
          
        
        
PlaceKitten 圖片：3
      
    
    

      

        
          
        
        
PlaceKitten 圖片：4
      
    
    

      

        
          
        
        
PlaceKitten 圖片：5
      
    
    

      

        
          
        
        
PlaceKitten 圖片：6
      
    
  

#

JS Fiddle 示範。

也可以用CSS來實現這一點，雖然搭載網格的數字網格左到然後右從上到下流動：

/* 用於提供通用主題的 CSS 自訂屬性
   多重元素：*/
：根 {
  --common間距：1em；
}


/* 一個簡單的 CSS 重設以刪除預設邊距，
   和填充物；確保所有瀏覽器都使用
   內容的大小調整演算法相同，且
   套用相同的字體大小和字體系列：*/
*,
：：前，
：：後 {
  框大小：邊框框；
  字體系列：系統使用者介面；
  字體大小：16px；
  保證金：0；
  填充：0；
}

主要的 {
  /* 設定內聯軸的大小（寬度，英文和
     拉丁語）至 80 個視口寬度單位，最小
     大小為 30 root-em 單位，最大大小為 1300 像素：*/
  內聯尺寸：夾子（30rem，80vw，1300px）；
  /* 使元素在內聯軸上居中: */
  內聯邊距：自動；
}


/* 強調標題: */
h4 {
  字體大小：1.8em；
  邊距塊： calc(0.5 * var(--commonSpacing));
  文字對齊：居中；
}

ul {
  /* 使用網格佈局： */
  顯示：網格；
  /* 相鄰元素的間距: */
  間隙：var(--commonSpacing);
  /* 定義兩列，每列取一小部分
     可用空間：*/
  網格模板列：重複（2，1fr）；
  清單樣式類型：無；
  文字對齊：居中；
}

#
  
Unsere Immobilien
  

    

      

        
          
        
        
PlaceKitten 圖片：1
      
    
    

      

        
          
        
        
PlaceKitten 圖片：2
      
    
    

      

        
          
        
        
PlaceKitten 圖片：3
      
    
    

      

        
          
        
        
PlaceKitten 圖片：4
      
    
    

      

        
          
        
        
PlaceKitten 圖片：5
      
    
    

      

        
          
        
        
PlaceKitten 圖片：6
      
    
  

#

JS Fiddle 示範。

並且，使用彈性佈局：

/* 用於提供通用主題的 CSS 自訂屬性
   多重元素：*/
：根 {
  --common間距：1em；
}


/* 一個簡單的 CSS 重設以刪除預設邊距，
   和填充物；確保所有瀏覽器都使用
   內容的大小調整演算法相同，且
   套用相同的字體大小和字體系列：*/
*,
：：前，
：：後 {
  框大小：邊框框；
  字體系列：系統使用者介面；
  字體大小：16px；
  保證金：0；
  填充：0；
}

主要的 {
  /* 設定內聯軸的大小（寬度，英文和
     拉丁語）至 80 個視口寬度單位，最小
     大小為 30 root-em 單位，最大大小為 1300 像素：*/
  內聯尺寸：夾子（30rem，80vw，1300px）；
  /* 使元素在內聯軸上居中: */
  內聯邊距：自動；
}


/* 強調標題: */
h4 {
  字體大小：1.8em；
  邊距塊： calc(0.5 * var(--commonSpacing));
  文字對齊：居中；
}

ul {
  /* 使用 Flexbox 版面配置： */
  顯示：柔性；
  /* 簡寫為：
    彎曲方向：行；
    彈性包裹：包裹； */
  flex-flow：行換行；
  /* 設定相鄰元素之間的間隙： */
  間隙：var(--commonSpacing);
  /* 刪除預設清單標記: */
  清單樣式類型：無；
}

李{
  /* 允許 
 擴充功能以佔用
     更多空間：*/
  彈性成長：1；
  /* 設定元素的大小
     父母的45%；彈性基礎
     始終引用彈性項目的內聯軸，
     可以透過更新來修改
     父級的彎曲方向：*/
  彈性基礎：45%；
  /* 將內容放在 
 中：*/
  文字對齊：居中；
}

#
  
Unsere Immobilien
  

    

      

        
          
        
        
PlaceKitten 圖片：1
      
    
    

      

        
          
        
        
PlaceKitten 圖片：2
      
    
    

      

        
          
        
        
PlaceKitten 圖片：3
      
    
    

      

        
          
        
        
PlaceKitten 圖片：4
      
    
    

      

        
          
        
        
PlaceKitten 圖片：5
      
    
    

      

        
          
        
        
PlaceKitten 圖片：6
      
    
  

#

JS Fiddle 示範。

參考文獻：

• 盒子尺寸。
• 內部破解。
＃＃＃＃＃＃＃＃＃夾鉗（）＃＃＃＃＃＃。＃＃＃
• 列數。
• CSS自訂屬性。
CSS 邏輯屬性
• 。 ＃＃＃＃＃＃＃＃＃展示＃＃＃
• flex-basis。
• 彎曲方向。
• flex-grow。
• flex-flow。
• flex-wrap。
＃＃＃＃＃＃＃＃＃差距＃＃＃
• 網格範本列 .
• 內聯大小。
• 清單樣式類型 .
• 邊緣區塊。
• 內邊距。
＃＃＃＃＃＃＃＃＃重複（）＃＃＃＃＃＃。＃＃＃
• 文字對齊。
• ##var()。

Answer 2

您似乎在第一個容器中使用 h4 。

從 flexcontainer-1 中取得此元素。

為了達到預期的結果，你應該這樣做

.container {
  display: flex;
  gap:10px;
}

.item {
  height: 50px;
  width: 100px;
  background-color: blue
}

.box {
  display: flex;
  flex-direction: column;
  gap: 10px
}

  

    
House 1
    
House 2
    
House 3
  
  

    
House 4
    
House 5
    
House 6