html - 使用 flex 对齐已经有 flex 的元素？

Question

我正在尝试创建一个容器，其中包含许多内容的子图 block 。每个子图 block 都包含我想要居中的数据，这就是 flex 在子图 block 上的原因——这样我就可以对齐图 block 内容。
我想将 3 均匀地对齐到一行，所以我将 flex 放在父类上并希望 space-evenly 但这似乎不起作用。关于我做错了什么的任何想法？

<div class="container">
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>  
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>  
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>  
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>  
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>  
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>

</div>

CSS

.parent {
    display: flex;
    max-width: 1200px;
}

.child {
    display: inline-flex;
    margin-bottom: 26px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 396px;
    height:396px;
}

Answer 1

您缺少一些关键的东西。第一，您的父容器缺少 parent 类，因此 CSS 永远不会达到它的目标。开始标记现在是:

<div class="container parent">

接下来，我向 .parent CSS 规则添加了一个重要的 flex 属性，允许元素换行，否则你无法获得超过 3 个元素的 3-across:

flex-wrap: wrap;

将 space-between 添加到 .parent 可确保元素边到边而不管元素之间的宽度和间距如何:

justify-content: space-between;

然后我向 .child 元素添加了一个宽度，它可以灵活地创建 3-cross 布局。我使用 calc 作为在元素之间获得一些空间而不是水平接触的快速方法:

width: calc(33.333% - 20px);

还在那里放了一些小图片，以查看更多的内部 flex 效果。希望这对您有所帮助!

.parent {
    display: flex;
    max-width: 1200px;
    justify-content: space-between;
    flex-wrap: wrap;
}
.child {
    display: flex;
    margin-bottom: 26px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(33.333% - 20px);
    background-color: #ccc;
}

<div class="container parent">
  <div class="child">
      <img src="https://picsum.photos/40">
      <span>TITLE 1</span>
  </div>
  <div class="child">
      <img src="https://picsum.photos/40">
      <span>TITLE 2</span>
  </div>  
  <div class="child">
      <img src="https://picsum.photos/40">
      <span>TITLE 3</span>
  </div>  
  <div class="child">
      <img src="https://picsum.photos/40">
      <span>TITLE 4</span>
  </div>  
  <div class="child">
      <img src="https://picsum.photos/40">
      <span>TITLE 5</span>
  </div>  
  <div class="child">
      <img src="https://picsum.photos/40">
      <span>TITLE 6</span>
  </div>  
  <div class="child">
      <img src="https://picsum.photos/40">
      <span>TITLE 7</span>
  </div>

</div>