Probleme und Herausforderungen beim Ausrichten von Bildern in Flexbox

Question

Ich habe an einer Homepage gearbeitet, die ich kürzlich entwickelt habe, und habe einige Schwierigkeiten, meine Artikel in der Flexbox auszurichten. Die erste Flexbox sollte drei (3) Bilder enthalten und alle Bilder sollten in einer vertikalen Linie untereinander liegen.

Das ist auch wichtig für meine zweite Flexbox.

Das ist mein Code:

.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>

Es entsteht immer eine Lücke in der zweiten Ausrichtung des Bildes, leider habe ich keine Lösung für dieses Problem gefunden.

Ich würde mich sehr über Tipps oder Vorschläge zur Verbesserung meiner Codierung freuen.

Vielen Dank im Voraus.

Mit freundlichen Grüßen

Luke

Ich habe versucht, Attribute zu verwenden justifiy-content 和 align-items, aber das funktioniert bei mir nicht.

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 custom properties used to provide common theming
   to multiple elements: */
:root {
  --commonSpacing: 1em;
}

/* a simple CSS reset to remove default margins,
   and padding; ensuring all browsers use the
   same sizing algorithm for content, and also
   applying the same font-size and font-family: */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font-family: system-ui;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

/* to emphasise the heading: */
h4 {
  font-size: 1.8em;
  margin-block: calc(0.5 * var(--commonSpacing));
  text-align: center;
}

main {
  /* setting the size of the inline axis (width, in English and
     Latin languages) to 80 viewport width units, with a minimum
     size of 30 root-em units, and a maximum size of 1300 pixels: */
  inline-size: clamp(30rem, 80vw, 1300px);
  /* centering the element on the inline axis: */
  margin-inline: auto;
}

ul {
  /* using multi-column layout,
     ensuring two columns: */
  column-count: 2;
  /* removing default list-markers: */
  list-style-type: none;
  /* centering the 
 elements
  within the 
: */
  text-align: center;
}

li {
  /* ensuring that the 
 doesn't have
     its contents spread over columns,
     leaving unsightly orphans at the
     end, or beginning, of a column: */
  break-inside: avoid;
  /* spacing the elements out: */
  margin-block-end: var(--commonSpacing);
}

  
Unsere Immobilien
  

    

      

        
          
        
        
PlaceKitten image: 1
      
    
    

      

        
          
        
        
PlaceKitten image: 2
      
    
    

      

        
          
        
        
PlaceKitten image: 3
      
    
    

      

        
          
        
        
PlaceKitten image: 4
      
    
    

      

        
          
        
        
PlaceKitten image: 5
      
    
    

      

        
          
        
        
PlaceKitten image: 6
      
    
  

JS Fiddle 演示。

也可以使用 CSS 网格来做到这一点，尽管带有网格的数字将从左到右然后从上到下流动：

/* CSS custom properties used to provide common theming
   to multiple elements: */
:root {
  --commonSpacing: 1em;
}


/* a simple CSS reset to remove default margins,
   and padding; ensuring all browsers use the
   same sizing algorithm for content, and also
   applying the same font-size and font-family: */
*,
::before,
::after {
  box-sizing: border-box;
  font-family: system-ui;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

main {
  /* setting the size of the inline axis (width, in English and
     Latin languages) to 80 viewport width units, with a minimum
     size of 30 root-em units, and a maximum size of 1300 pixels: */
  inline-size: clamp(30rem, 80vw, 1300px);
  /* centering the element on the inline axis: */
  margin-inline: auto;
}


/* to emphasise the heading: */
h4 {
  font-size: 1.8em;
  margin-block: calc(0.5 * var(--commonSpacing));
  text-align: center;
}

ul {
  /* using grid layout: */
  display: grid;
  /* spacing adjacent elements: */
  gap: var(--commonSpacing);
  /* defining two columns, each taking one fraction of
     the available space:*/
  grid-template-columns: repeat(2, 1fr);
  list-style-type: none;
  text-align: center;
}

  
Unsere Immobilien
  

    

      

        
          
        
        
PlaceKitten image: 1
      
    
    

      

        
          
        
        
PlaceKitten image: 2
      
    
    

      

        
          
        
        
PlaceKitten image: 3
      
    
    

      

        
          
        
        
PlaceKitten image: 4
      
    
    

      

        
          
        
        
PlaceKitten image: 5
      
    
    

      

        
          
        
        
PlaceKitten image: 6
      
    
  

JS Fiddle 演示。

并且，使用弹性布局：

/* CSS custom properties used to provide common theming
   to multiple elements: */
:root {
  --commonSpacing: 1em;
}


/* a simple CSS reset to remove default margins,
   and padding; ensuring all browsers use the
   same sizing algorithm for content, and also
   applying the same font-size and font-family: */
*,
::before,
::after {
  box-sizing: border-box;
  font-family: system-ui;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

main {
  /* setting the size of the inline axis (width, in English and
     Latin languages) to 80 viewport width units, with a minimum
     size of 30 root-em units, and a maximum size of 1300 pixels: */
  inline-size: clamp(30rem, 80vw, 1300px);
  /* centering the element on the inline axis: */
  margin-inline: auto;
}


/* to emphasise the heading: */
h4 {
  font-size: 1.8em;
  margin-block: calc(0.5 * var(--commonSpacing));
  text-align: center;
}

ul {
  /* using flexbox layout:  */
  display: flex;
  /* shorthand for:
    flex-direction: row;
    flex-wrap: wrap; */
  flex-flow: row wrap;
  /* setting a gap between adjacent elements: */
  gap: var(--commonSpacing);
  /* removing default list-markers: */
  list-style-type: none;
}

li {
  /* allowomg the 
 to expand to take up
     more room: */
  flex-grow: 1;
  /* setting the size of the element to be
     45% of that of the parent; flex-basis
     always refers to the inline-axis of flex-items,
     which can be modified by updating the
     flex-direction of the parent: */
  flex-basis: 45%;
  /* centering the content within the 
: */
  text-align: center;
}

  
Unsere Immobilien
  

    

      

        
          
        
        
PlaceKitten image: 1
      
    
    

      

        
          
        
        
PlaceKitten image: 2
      
    
    

      

        
          
        
        
PlaceKitten image: 3
      
    
    

      

        
          
        
        
PlaceKitten image: 4
      
    
    

      

        
          
        
        
PlaceKitten image: 5
      
    
    

      

        
          
        
        
PlaceKitten image: 6
      
    
  

JS Fiddle 演示。

参考文献：

• box-sizing。
• break-inside。
• clamp()。
• column-count。
• CSS 自定义属性。
• CSS 逻辑属性。
• display。
• flex-basis。
• flex-direction。
• flex-grow。
• flex-flow。
• flex-wrap。
• gap。
• grid-template-columns .
• inline-size。
• list-style-type .
• margin-block。
• margin-inline。
• repeat()。
• text-align。
• 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