-1

I have a flex container with four child element without specifying the height of them, using justify content width the value of flex-start make them have a huge height as shown in the first picture which make the fourth element suited after this height.

First picture

and after using align-items with value of flex-start, the height shrink but the fourth element still appears far from them as shown in the second picture, so what is that empty space and height come from ? and should I always specify a height to my element to avoid this problem ?

enter image description here

div.parent
{
    margin:100px auto;
    background-color:cyan;
    display:flex;
    flex-flow:row wrap;
    height:500px;
    justify-content: flex-start;
    /* the first picture is without align items*/
    align-items:flex-start;
    padding:10px;
}

div.parent div
{
    margin:10px;
    width:350px;
    color:white;
    font-size:25px;
    background-color:rgb(11, 153, 94);
}
 <div class="parent">
        <div>first</div>
        <div>
            second
        </div>
        <div>
            third
        </div>
        <div>fourth</div>
    </div>
j08691
  • 204,283
  • 31
  • 260
  • 272
Abd al rahman shebani
  • 35
  • 6

2 Answers2

1

div.parent
{
    margin:100px auto;
    background-color:cyan;
    display:flex;
    flex-flow:row wrap;
    height:auto;
    justify-content: flex-start;
    /* the first picture is without align items*/
    align-items:flex-start;
    padding:10px;
}

div.parent div
{
    margin:10px;
    width:350px;
    color:white;
    font-size:25px;
    background-color:rgb(11, 153, 94);
}
<div class="parent">
        <div>first</div>
        <div>
            second
        </div>
        <div>
            third
        </div>
        <div>fourth</div>
    </div>
div.parent {
    height:500px;
}

that value is causing the space. Change it to auto as in the snipet above. The remaining space comes from the margin.

tacoshy
  • 10,642
  • 5
  • 17
  • 34
0

I have also discovered a way to solve it by using align-content with a value of flex-start it will make the right layout even if we still using height property.

Abd al rahman shebani
  • 35
  • 6