Uczę się używać flexbox i nie jestem w stanie wyrównać zawartości pionowo wewnątrz klasy .headercontent. Wydaje się uczcić wszystko, co justify-content ale ignoruje align-content. Szukałem i znalazłem Niczym wątek i wydaje się to sugerować Rodzic powinien mieć wyraźnie ustawiony wysokość. Ustawiam wysokość, ustawienie flex-basis i flex-grow i min-height. Ale nadal div zawierający h1 utknął na górze header. Chcę, żeby zielony div był w pionowym centrum header. Co ja robię źle?

html {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-size: 100%;
            line-height: 1.2em;
          }
          body {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            height: 100vh;
            background-color: #cdc9c1;
          }
          header {
            background-color: #a99879;
            flex-basis: 10%;
            flex-grow: 1;
            min-height: 20px;
          }
          main {
            background-color: #5b431a;
            flex-basis: 80%;
            flex-grow: 8;
          }
          footer {
            background-color: #77613c;
            flex-basis: 10%;
            flex-grow: 1;
          }
          .headercontent {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            background-color: green;
            min-height: 20px;
          }
          .navstyle {
            list-style-type: none;
          }
<html>
      <head>
      </head>
      <body>
        <header>
          <div class="headercontent">
            <h1>This is the header</h1>
        </div>
        </header>
        <nav>
          <ul>
            <li>section1</li>
            <li>section2</li>
            <li>section3</li>
          </ul>
        </nav>
        <main>
          <p> this is the main body</p>
        </main>
        <footer>
          <p> this is the footer </p>
        </footer>
      </body>
    </html>

Oto linketeine link do mojej pracy https://codepen.io/knows_not_much/pen/rnxxoom v >.

0
Knows Not Much 2 sierpień 2020, 07:16

1 odpowiedź

Najlepsza odpowiedź

Chcę, żeby zielony div był w pionowym centrum nagłówka. Co ja robię źle?

Element header zajmuje 10% wysokości body. Twój .headercontent nie zajmuje całej zdefiniowanej wysokości {x3}}. Dlatego będzie siedzieć na szczycie. Aby rozwiązać to, możesz przypisać element header, aby był pojemnikiem Flex i jest to miejsce, w którym przypisujesz align-items: center; justify-content: center

header {
    background-color: #a99879;
    flex-basis: 10%;
    flex-grow: 1;
    display: flex; /* add these */
    align-items: center; /* add these */
    justify-content: center; /* add these */
}

Przypisz width: 100% do .headercontent później (w razie potrzeby), jeśli musisz mieć zielone tło zająć przestrzeń

1
95faf8e76605e973 2 sierpień 2020, 05:05