Breite der Flex-items

[Rolf B]

Hallo Eric,

eine Navigation als eine Zone fester Breite am linken Rand erzeugt man mit Flexbox oder Grid - eigentlich ist Grid das bessere Werkzeug, weil man damit das gesamte Basislayout der Seite steuern kann und bei schmalen Viewports sehr gezielt die Seitenbereiche neu anordnen kann.

Einen festbreiten Nav-Bereich links erreichst Du mit Flexbox so, dass Du dafür flex-grow und flex-shrink auf 0 setzt und flex-basis auf die gewünschte Breite. Du kannst sogar "auto" als Basis nehmen, dann orientiert er sich am Inhalt des Nav-Bereichs. Du kannst max-width hinzu nehmen, damit zu lange Navigationselemente nicht das Layout zerreißen, sondern umbrechen. Der Hauptteil bekommt flex-grow 1, flex-shrink 1 und flex-basis setzt Du auf einen Breite, die der Hauptteil mindestens haben soll. Wird sie unterschritten, soll er in die Folgezeile. Dazu setzt Du auf der Flexbox noch flex-wrap:wrap, bzw. nimm flex-flow, das kombiniert flex-direction und flex-wrap.

.nav-main {
   display: flex;
   column-gap: 1em;     /* Abstand zwischen nav und main */
   flex-flow: row wrap;
   justify-content: center;  /* Bei Umbruch soll nav zentriert sein */
}
.nav-main nav {
  flex: 0 0 8em;
}
.nav-main main {
  flex: 1 0 30em;
}

HTML dazu:

<div class="nav-main">
   <nav>
      ...
   </nav>
   <main>
      ...
   </main>
</div>

Damit hast Du aber ein div im HTML, das nur für's Layout da ist. Unschön.

Eine Steuerung mit @media (width >= 40em) (yep, width >= 40em geht heutzutage, nicht mehr min-width:40em) und Grid-Layout wird heute eher empfohlen. Ich empfehle dafür diesen Teil des Wiki als Gute-Nacht Lektüre.

Rolf