Verical space between flex items

Question

I have two flex items in a container wrapped in a column, and there it is a big space between the the two boxes, I tried to use align-items: flex-start; or align-self: flex-start; but does not work.

please look at the code snippet.

thank you.

.wrapper {
  display: flex;
  }
.content {
  width: 300px;
  height: 400px;
  background: green;
  }
.sidebar {
    display: flex;
    /* flex-basis: 100px; */
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: 100px;
}
.sidebar > div {
    background: blue;
    width: 100px;
    height: 50px;
    align-self: flex-start;
}

<div class = "wrapper">

  <div class="sidebar">

    <div></div>
    <div></div>

  </div>

  <div class = "content">

  </div>

</div>

You have given height of 50px to each flex-item. How do you expect the behaviour my friend. To being them one below the other I guess? If I have understood your question correctly — Imran Rafiq Rather, Jul 23 '21 at 08:28

score 2 · Answer 1 · answered Jul 23 '21 at 08:31

You could simply use flex-direction:column; to get them one below the other.

If this is what you are looking for :) Also for your information, flex-basis is the property of flex-items and not of flex-container.

.sidebar {
    display: flex;
       height: 400px;
       flex-direction:column;
       max-width: 280px;
}
.sidebar > div {
    background: blue;
    width: 280px;
    height: 50px;
    margin-bottom:0.5rem;
}

<div class="sidebar">

    <div></div>
    <div></div>

</div>

score 1 · Accepted Answer · answered Jul 23 '21 at 08:33

1

You need to add flex-direction: column; to the .sidebar

.sidebar {
    display: flex;
    /* flex-basis: 280px; */
    flex-wrap: wrap;
    align-items: flex-start;
    height: 400px;
    max-width: 280px;
    flex-direction: column;
}
.sidebar > div {
    background: blue;
    width: 280px;
    height: 50px;
    margin-top: 1px; /* Demo purposes */
}

<div class="sidebar">

<div></div>
<div></div>

</div>

answered Jul 23 '21 at 08:33

TechySharnav

4,869
2
11
29

I believe I have already answered it. hehe !!! Anyways, Cheers !!! – Imran Rafiq Rather Jul 23 '21 at 08:34
@ImranRafiqRather Yeah. I saw your answer after posting mine. Cheers! – TechySharnav Jul 23 '21 at 08:37

score -1 · Answer 3 · answered Jul 23 '21 at 09:02

no need to wrap your flexbox of .sidebar just simply comment it out. and add flex-direction: column;

.wrapper {
  display: flex;
  }
.content {
  width: 300px;
  height: 400px;
  background: green;
  }
.sidebar {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    /* flex-basis: 100px; */
    /* flex-wrap: wrap; */
    align-items: flex-start;
    max-width: 100px;
}
.sidebar > div {
    background: blue;
    width: 100px;
    height: 50px;
    align-self: flex-start;
}

<div class = "wrapper">

      <div class="sidebar">

        <div></div>
        <div></div>

      </div>

      <div class = "content">

      </div>

    </div>

Verical space between flex items

3 Answers3