Question

我正在尝试使用一个容器，其中包含许多内容子块。每个子图块都包含我要居中的数据，这就是flex在子图上的原因-这样我就可以对齐图块的内容。
我想将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个项目：

flex-wrap: wrap;

将space-between添加到.parent可以确保无论项目之间的宽度和间距如何，项目都可以边到边：

justify-content: space-between;

然后，我为.child元素添加了一个宽度，该宽度很灵活，可以创建3个交叉的布局。我使用calc作为在元素之间留出一些空间而不是水平接触的快速方法：

width: calc(33.333% - 20px);

也在那里放了一些图像，以查看更多的内部弯曲效果。希望这会有所帮助！

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

使用flex对齐已经具有flex的项目吗？

1 个答案: