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 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 演示。

参考文献：

• 盒子尺寸。
• 内部破解。
＃＃＃＃＃＃＃＃＃夹钳（）＃＃＃＃＃＃。＃＃＃
• 列数。
• 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