How to align items not working unless using display flex?

Question

I have a wrapper which contains both the header and main contents. The wrapper is set to display flex and when I go to align the items contained in the header, it will not align unless I set the header tag to display flex as well.

Im confused as to why i have to set display flex on both the wrapper and the header tag for it to work? I thought that the child container which in this case the header, should inherit the display flex from the parent container.

/* Styling used for index pages including registration form and reset password pages. */

* {
  text-decoration: none;
}

html {
  font-family: 'Lato', Arial, sans-serif;
}

body,
html {
  height: 100%;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  flex: 1;
  display: flex;
  align-items: center;
}

main {
  flex: 3;
}

<body>
  <div class="wrapper">
    <header>
      <h1>Quiz Manager</h1>
      <img src="/QuizManager/images/Logo.png" alt="Logo">
    </header>
    <main>
      <div class="form-container">
        <form action="index.php" method="POST">
          <input type="text" name="username" value="<?php echo isset($_POST['username']) ?  htmlspecialchars($_POST['username']) : '' ?>" placeholder="Username">
          <input type="password" name="password" placeholder="Password">
          <button type="submit" name="submit">Login</button>
        </form>
      </div>
    </main>
  </div>
</body>

You can achieve same thing by adding `header > h1 { display:inline-block; }` without adding `display:flex` in header — Nimitt Shah, Sep 24 '18 at 16:52

score 1 · Accepted Answer · answered Sep 24 '18 at 16:52

1

When you declare flex on .wrapper it affects direct elements only. Children of header do not inherit the flex property.

answered Sep 24 '18 at 16:52

Serg Chernata

12,280
6
32
50

How to align items not working unless using display flex?

1 Answers1