Flex wrap not working

<html lang="en">
<head>
    <link rel="stylesheet" href="Flex.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlexBox test</title>
</head>
<body>
    <div class="Container">
    <p class="Item P1">FlexBox1</p>
    <p class="Item P2">FlexBox2</p>
    <p class="Item P3">FlexBox3</p>
    </div>

     <div class="FlexBox-container">
    <div class="FlexBox-Item Flex1">Box1</div>
    <div class="FlexBox-Item Flex2">Box2</div>
    <div class="FlexBox-Item Flex3">Box3</div>
    </div> 
    
</body>
</html>
.FlexBox-container{
    
    display: flex;
   justify-content: space-around; /* vertical */
    background-color: red;
    border:  10px  blue solid;
    align-items: flex-start; /* horizontal */                            
    flex-wrap: wrap;
    

}

.FlexBox-Item{
    
    width: 100px;
    border: 3px solid black;
    background-color: grey;


}

.Flex1{
    min-height: 100px;

}

.Flex2{
    min-height: 200px;

}

.Flex3{
    min-height: 300px;

}






.Container{
    background-color: blue;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    
}

.P1{
    border: gold solid ;
}

.P2{
    border: gold solid;
}

.P3 {
    border: gold solid;
}

Wrap is working . . . .

1 Like

lmao, It’s not working for me though. Did you copy the code and pasted it on your code pen?

Did you narrow your screen down to less than the width of that structure?

The elements are 100px wide and you have 3 of them so they wont wrap until the screen is smaller than the space they take up.

On my iPhone SE they don’t need to wrap but if I increase the width to 120px then they wrap.

As an aside I note that your comments in the css about the vertical and horizontal alignment is the wrong way around.

Justify is horizontal alignment and align is vertical alignment unless you switch to flex-direction:column and then the axis changes and then they reverse alignments.

Yeah, I’m stupid, can’t get anything right

1 Like

lol don’t worry flexbox is quite tricky to get your head around at times and takes a while to understand. :slight_smile: I still have to double check when I try something that it does what I think.

Ya ik, It’s just harder to learn when you have no passion or motivation; just doin’ it for the money.

also, what’s the difference between Min-height and height?

min-height sets an initial height that is the minimum for that element. If you say min-height:700px then the element will be at least 700px tall. However if you have content that is taller than 700px in that element then it will grow with the content as required.

On the other hand if you said height:700px then all you get is 700px and if your content was 800px tall then it would stick out the bottom by 100px (and be ignored by the browser and possibly overlap other stuff on the page).

1 Like

It didn’t work for me(Not sure if I interpreted the concept right)

I set min width to 200px
and min height to 200px and other settings for the other 2 items, but the result didn’t come where the content will grow with the element and instead going outside the border.

.FlexBox-container{ 
    
    display: flex;
    background-color: red;
    border:  10px  blue solid;
     justify-content: center;
    /*justify-content: center;  horizontal */
    font-size: 150;
    

   

}

.FlexBox-Item{ /* item properties are meant to control the layout of the items like width and height or positioning.*/
    
   min-width: 200px;
    margin: 10px;
    border: 3px solid black;
    background-color: grey;
   


}

.Flex1{
   min-height: 200;
  
  

}

.Flex2{
   min-height: 300; 
   
   

}

.Flex3{
   min-height: 200;
  
    
}






.Container{
    background-color: blue;
    display: flex;
    justify-content: space-around;
  
    
}

.P1{
    border: gold solid ;
}

.P2{
    border: gold solid;
}

.P3 {
    border: gold solid;
}

The answer is in your other thread.

Where are your units!!!


min-height: 200;

Without a unit such as px that will be zero or be ignored altogether.

lmao, I forgot

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.