Flexbox 方向和其中的多个图像

Question

我正在尝试在此版本中使用 flex-box；我附上了 HTML 和 CSS 代码部分。我试图让 DIV 容器容纳 9 张图像，这些图像应该 flex-wrap: wrap 分成 3 行，每行 3 张图像。我确定我遗漏了一些小东西；但我能做的最好的事情就是得到所有 9 张图像的一长串连续的行。

我尝试观看一些视频并在 HTML 和 CSS 中进行不同的更改，但没有成功；谁能给我指出正确的方向，或者请指出我的错误？

代码：

.gallery {
  width: 100%;
  height: 100vh;
  text-align: center;
  background-color: rgb(0, 4, 17);
  flex-direction: row;
}

.food-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.foodimg {
  display: flex;
}

<section class="gallery">
  <div>
    <h2>OUR FOOD</h2>

    <div class="food-container">
      <div class="foodimg">
        <img src="img/food-avocadotoast.jpg" alt="" />
      </div>
      <div class="foodimg">
        <img src="img/food-burger.jpg" alt="" />
      </div>
      <div class="foodimg">
        <img src="img/food-poutine.jpg" alt="" />
      </div>
      <div class="foodimg">
        <img src="img/food-ribs.jpg" alt="" />
      </div>
      <div class="foodimg">
        <img src="img/food-sandwich.jpg" alt="" />
      </div>
      <div class="foodimg">
        <img src="img/food-sausage.jpg" alt="" />
      </div>
      <div class="foodimg">
        <img src="img/food-steak.jpg" alt="" />
      </div>
      <div class="foodimg">
        <img src="img/food-tacos.jpg" alt="" />
      </div>
      <div class="foodimg">
        <img src="img/food-wings.jpg" alt="" />
      </div>
    </div>
  </div>
</section>

Answer 1

这里，最好用网格

.food-container{
  display: grid;
  grid-template-columns: auto auto auto; /*that should do it*/
}

Flexbox 方向和其中的多个图像

Flexbox Directions and multiple images within

html

css

flexbox