Why is the header section so far up than it should be when I justify-content?-CodePudding

Why is the header section so far up than it should be when I justify-content?

When I set justify content of the header__container to space around, the header starts to go way up beyond its margin. Please help.

header {
  height: calc(100vh - 80px);
}

.header__container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

<header>
  <div >
    <div >
      <h1>Lebanon's most awarded online library platform</h1>
      <h2>Find your dream book with <span >Library</span></h2>
    </div>
    <figure >
      <img src="https://via.placeholder.com/200" alt="">
    </figure>
  </div>
</header>

CodePudding user response：

You've set the container height to 100%, but sometimes that's not enough height for your content. Because you've centered it some of the top is cut off, and same at the bottom.

Instead, set min-height.

header {
  height: calc(100vh - 80px);
}

.header__container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

<header>
  <div >
    <div >
      <h1>Lebanon's most awarded online library platform</h1>
      <h2>Find your dream book with <span >Library</span></h2>
    </div>
    <figure >
      <img src="https://via.placeholder.com/200" alt="">
    </figure>
  </div>
</header>

CodePudding user response：

Now i can see, when you use flex-direction: column; then your justify-content do vertical aligment.

You don't need to use flex-direction: column in this case, because it's usual behavior for display: block elements

CodePudding user response：

Try removing the justify-content: space-around; which on a small screen does what you say given you forced a height on the header (why?) yet have "bigger" items within it (your image). Keep in mind that "too much CSS" is often the bane of it - less is more most often.

Note I put a border on so we can visually see the blocks.

header {
  height: calc(100vh - 80px);
}

.header__container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  /*justify-content: space-around;*/
}

.header__container>* {
  border: solid lime 1px;
}

<header>
  <div >
    <div >
      <h1>Lebanon's most awarded online library platform</h1>
      <h2>Find your dream book with <span >Library</span></h2>
    </div>
    <figure >
      <img src="https://via.placeholder.com/200" alt="">
    </figure>
  </div>
</header>

Alternate option: stop doing the height and let the "flow" flow.

header {
  /*height: calc(100vh - 80px);*/
}

.header__container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.header__container>* {
  border: solid lime 1px;
}

<header>
  <div >
    <div >
      <h1>Lebanon's most awarded online library platform</h1>
      <h2>Find your dream book with <span >Library</span></h2>
    </div>
    <figure >
      <img src="https://via.placeholder.com/200" alt="">
    </figure>
  </div>
</header>