Why isn't justify-content: space-between working on cross axis-CodePudding

I'm creating landing page and I want to separate navbar, text that should be in the middle of wallpaper and text that should at the bottom.

Here is the sandbox: https://codesandbox.io/s/long-worker-dy31zt?file=/index.html

As you can see, justify-content: space-between is not doing anything on Y axis even-though I made sure it is flex-direction: column. What is the best way to center text in the middle of the background on the landing page? I wanted to do it with flex but it's not working.

CodePudding user response：

You need to use this:

.header-wrap {
    height: 100vh;
}

Only after that the .header-wrap will take all the space vertically and your big title and mini title will be placed in the middle of the page.

Here you can check that: https://codesandbox.io/s/elated-clarke-rkwrj9?file=/styles.css

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

html {
  scroll-behavior: smooth;
}

header {
  min-height: 100vh;
  background-color: black;
}

.header-wrap {
  width: min(90%, 1290px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  height: 100vh;
}

.logo {
  font-size: 2rem;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 45px 0;
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.486);
}

.navbar-nav {
  list-style: none;
  width: 50vw;
  display: flex;
  justify-content: space-between;
}

.header-text {
  text-align: center;
}

.header-text h5 {
  color: orange;
  font-size: 1.5rem;
}

.header-text h1 {
  color: white;
  font-size: 5rem;
}

.header-text-down {
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <header>
    <div >
      <nav >
        <div >LOGO</div>
        <ul >
          <li ><a href="" >ITEM1</a></li>
          <li ><a href="" >ITEM2</a></li>
          <li ><a href="" >ITEM3</a></li>
          <li ><a href="" >ITEM4</a></li>
        </ul>
      </nav>

      <div >
        <h5>mini title</h5>
        <h1>BIG TITLE</h1>
      </div>

      <div >
        <p>small text that should be down</p>
      </div>
    </div>
  </header>
</body>

</html>

CodePudding user response：

space-between isn't doing anything because it doesn't know how much space is there with no defined height. Set the height of the header-wrap to 100vh and it'll work.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

html {
  scroll-behavior: smooth;
}


/* ===============
    header styles
   ===============
*/

header {
  min-height: 100vh;
  background-color: black;
}

.header-wrap {
  width: min(90%, 1290px);
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.logo {
  font-size: 2rem;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 45px 0;
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.486);
}

.navbar-nav {
  list-style: none;
  display: flex;
}

.header-text {
  text-align: center;
}

.header-text h5 {
  color: orange;
  font-size: 1.5rem;
}

.header-text h1 {
  color: white;
  font-size: 5rem;
}

.header-text-down {
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <header>
    <div >
      <nav >
        <div >LOGO</div>
        <ul >
          <li ><a href="" >ITEM1</a></li>
          <li ><a href="" >ITEM2</a></li>
          <li ><a href="" >ITEM3</a></li>
          <li ><a href="" >ITEM4</a></li>
        </ul>
      </nav>

      <div >
        <h5>mini title</h5>
        <h1>BIG TITLE</h1>
      </div>

      <div >
        <p>small text that should be down</p>
      </div>
    </div>
  </header>
</body>

</html>