Flex-box: row not working, Help me please-CodePudding

`Ive been struggling for days my flex row won't work and I honestly 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. Any tips on how to come over this huge issue that has taken me days to figure our?

enter code here


             .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 >
   <div id="kitchen-hacks"> 
   
     <h2 id="hacks"> Kitchen Hacks</h2>
     <div   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   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   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  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  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  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>

CodePudding user response：

Try Grids, it is much better to display galleries.

But in this scenario with flex elements I am personally using next construction:

div.flex-div>.your-image-divs>img p

P.S. This construction will be working in VS Code for example.

https://codepen.io/rohhthone/pen/wvjVBWy

<div >
   <div >
    <img src="custom image" alt="custom image" loading="lazy">
    <p>Some text</p>
   </div>
   <div >
    <img src="custom image" alt="custom image" loading="lazy">
    <p>Some text</p>
   </div>
   <div >
    <img src="custom image" alt="custom image" loading="lazy">
    <p>Some text</p>
   </div>
</div>

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

If you have any question, ask me. I am not sure that I am correctly understand your issue, but it seems clear and very easy.

By the way watch Kevin Powell's video's of flex-box https://www.youtube.com/watch?v=hwbqquXww-U&list=PL4-IK0AVhVjMSb9c06AjRlTpvxL3otpUd

This video for example show how to create Grid media scroller, that is very cool for mobiles, and might able to used in every scenario: https://www.youtube.com/watch?v=3yfswsnD2sw&t=1143s

CodePudding user response：

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 >
  <span>Image 1</span>
  <span>Image 2</span>
  <span>Image 3</span>
</div>

<br>
<br>

<div >
  <span>Image 4</span>
  <span>Image 5</span>
  <span>Image 6</span>
</div>