"Flex-box: row" CSS rule not working as expected - html

Question

My flex row won't work and I don't know why. I've tried everything. I need the images to be three in a row then break and start a new row. How can I overcome this issue?
.flex-div > div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-between;
}
/*kitchen hacks*/
#kitchen-hacks {
padding-top: 80px;
}
.row-one {
width: 100%;
}
#kitchen-hacks h2 {
text-align: center;
margin-bottom: 15px;
border: solid black;
border-radius: 10px;
}
#kitchen-hacks p {
height: auto;
width: 54%;
margin-top: 5px;
margin-bottom: 50px;
border: solid black;
}
<div class="flex-div">
<div id="kitchen-hacks">
<h2 id="hacks"> Kitchen Hacks</h2>
<div class="row-one" style="order: 4"> <img src="/assets/images/kitchen-hack.one.png" alt="Chalk board on the inside of a shelf with mesuring cups hanong from it"> <p> Place a chalkboard and hangers on the inside of your kitchen shelf to store measuring cups the fashion way. </p> </div>
<div class="row-one" style="order: 2"><img src="/assets/images/kitchen-hack-two.png" alt="A shelf inside a shelf with plates on it"> <p> Store shelves in your shelves to optimize spacce and to better take advantage of the empty space not used. </p> </div>
<div class="row-one" style="order: 3"><img src="/assets/images/kitchen-hack-three.png" alt="Coffe pouring into an ice tray">
<p>Fill an ice tray with coffee so that you can enjoy your coffee without watering it down. </p> </div>
<div class="row-one" style="order: 1"> <img src="/assets/images/kitchen-hack-four.png" alt="Spices attached to the fridge with magnets"> <p> Put magnets under your spices to make them stick to the fridge. That way you can multitask</p>
</div>
<div class="row-one" style="order: 5"><img src="/assets/images/kitchen-hack-five.png" alt="Kitchen sink area"> <p> Using your sink as a temporary chopping surface frees the rest of your counter for other cooking steps. </p> </div>
<div class="row-one" style="order: 6"><img src="/assets/images/kitchen-hack-six.png" alt="An egg in a glass of water and two eggs beside the glass">
<p> Fill a tall glass of water and lower an egg in it. If it sinks to the bottom, the egg is fresh. If it floats to the top, it’s time to toss it </p> </div>
</div>
</div>

Answer 1

Make a parent container that will contain all the images you want in a row and use flex properties.
e.g:
.row-one, .row-two{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
<div class="row-one">
<span>Image 1</span>
<span>Image 2</span>
<span>Image 3</span>
</div>
<br>
<br>
<div class="row-two">
<span>Image 4</span>
<span>Image 5</span>
<span>Image 6</span>
</div>

Answer 2

Try Grids; it is much better to display galleries.
But in this scenario with flex elements, I would use the following approach:
.flex-div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-div > .image{
width: 30%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-around;
background-color: magenta;
}
<div class="flex-div">
<div class="image">
<img src="custom image" alt="custom image" loading="lazy">
<p>Some text</p>
</div>
<div class="image">
<img src="custom image" alt="custom image" loading="lazy">
<p>Some text</p>
</div>
<div class="image">
<img src="custom image" alt="custom image" loading="lazy">
<p>Some text</p>
</div>
</div>
Codepen: https://codepen.io/rohhthone/pen/wvjVBWy
This video shows how to create a grid media scroller, which might be useful to you.