flex-grow doesnt work, what did I do wrong?

Question

I'm new to frontend web coding and I wanted to make a mockup website to speed up my learning process. I wanted to make the sign-in part align in the middle of the page, i found some tutorial using flex-grow so it would scale with size, but this is what I got instead:

What did I do wrong?

(I only posted snippets of code I think would matter not to complicate things)

.sign-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  **<THE PART WHERE THE PROBLEM ARISES>**
}

.sign-in-text {
  display: flex;
  align-items: left;
  flex-direction: column;
  font-size: 3.5em;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.not-sign-in-text {
  font-size: 2rem;
  padding: 0;
  margin: 0;
}

.miss-you {
  font-size: 1.5rem;
  font-weight: 500;
}

.sign-in-form {
  display: flex;
  align-items: left;
  flex-direction: column;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" />
  <link href="index.css" rel="stylesheet" />
  <title>ELOHSSA</title>
  <header class="secondary">
    <section class="sign-in">

      <h1 class="sign-in-text">
        sign in.
        <span class="miss-you">
                                We missed you already :(
                                </span>
      </h1>


      <form class="sign-in-form">
        <div class="information">
          <label> Username: </label>
          <input type="text">
        </div>
        <div class="information">
          <label> Password:</label>
          <input type="password">
        </div>
        <div class="information">
          <button type="submit" class="button">
                                        Sign in.
                                    </button>
        </div>
      </form>
    </section>
  </header>

</html>

Thanks for helping!

Flex grow applies to children not the parents – Paulie_D Mar 25 '20 at 04:30 — Paulie_D, Mar 25 '20 at 04:30

score 0 · Answer 1 · answered Mar 25 '20 at 03:53

0

Try this instead:

.sign-in {
    display:flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

answered Mar 25 '20 at 03:53

Isaac Ingles

11
1

score 0 · Answer 2 · answered Mar 25 '20 at 04:26

On basis of your code snippet I assume this is what you need?

.sign-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  display: flex;
  flex-direction: row;
  width: 100%;
}

#leftContent {
  text-align: right;
  width: 50%;
}

#rightContent {
  text-align: left;
  width: 50%;
  margin-left: 10%;
}

.sign-in-text {
  display: flex;
  flex-direction: column;
  font-size: 3.5em;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.not-sign-in-text {
  font-size: 2rem;
  padding: 0;
  margin: 0;
}

.miss-you {
  font-size: 1.5rem;
  font-weight: 500;
}

.sign-in-form {
  display: flex;
  align-items: left;
  flex-direction: column;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" />
  <link href="index.css" rel="stylesheet" />
  <title>ELOHSSA</title>
  <header class="secondary">
    <section class="sign-in">
      <div id="leftContent">

        <h1 class="sign-in-text">
          sign in.
          <span class="miss-you">
                            We missed you already :(
                            </span>
        </h1>
      </div>
      <div id="rightContent">
        <form class="sign-in-form">
          <div class="information">
            <label> Username: </label>
            <input type="text">
          </div>
          <div class="information">
            <label> Password:</label>
            <input type="password">
          </div>
          <div class="information">
            <button type="submit" class="button">
                                    Sign in.
                                </button>
          </div>
        </form>
      </div>



    </section>
  </header>

flex-grow doesnt work, what did I do wrong?

2 Answers2