Flexbox Directions and multiple images within - html

Question

I am attempting to use flex-box within this build; I have attached both the HTML and CSS code portions. I have attempted to get the DIV container to hold 9 images that should flex-wrap: wrap into 3 rows of 3 images. I am sure I am missing something small; but the best I can do is get one long continuous row of all 9 images.
I have tried to watch some videos and make different changes within HTML and CSS with no success; could anyone please point me in the right direction, or point out my mistake please?
Code:
.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

Here, It's best to use grids
.food-container{
display: grid;
grid-template-columns: auto auto auto; /*that should do it*/
}