Breite der Flex-items

[Eric]

Moin,

richtet sich die Breite eines Flex-Items nur nach der Breite des Inhalts oder kann man die Breite in em oder % festlegen?

[Rolf B]

Hallo Eric,

es gibt unterschiedliche Methoden.

Zum einen kannst Du dem Flexitem eine width oder min-width geben. In em oder %.

Aber eigentlich heißt die passende Eigenschaft flex-basis. Damit definierst Du die Basisbreite. Der Defaultwert dafür ist "auto", d.h. es passt sich an den Inhalt an.

Zusammen mit flex-grow und flex-shrink berechnet der Browser dann die endgültige Breite.

Guckst Du Wiki

Rolf

[Eric]

Danke Rolf,

wenn ich am PC eine Aufteilung "Verzeichnis (Index) links, Inhalt rechts" habe, so rutschen die bei einem schmalen viewport untereinander. Daher ist wohl der Flex-Defaultwert in Ordnung.

Was muss ich angeben, wenn das Verzeichnis beim breiten viewport bei unterschiedlichen Breiten des Inhalts (der über den Index aufgerufenen Seiten) immer gleich breit sein soll. Ist es sinnvoll eine em- oder eine %-Angabe zu machen?

Muss ich dann auch eine @media.... min-width-Angabe machen?

Falls ja, wie finde ich heraus, welchen em-Wert ich angeben muss?

In Beispielen sehe ich unterschiedliche Größenangaben.

Ich kenne ja nicht einmal die Breite in em meines viewports am PC!

[Gunnar Bittersmann]

@@Eric

Ich kenne ja nicht einmal die Breite in em meines viewports am PC!

Es ist auch gar nicht nötig.

Lege die Breite des Verzeichnis-Blocks in em so fest, dass dessen Inhalt gut dargestellt wird.

🖖 Live long and prosper

PS: Ich habe dein Posting mal formatiert. Um Absätze zu erzeugen, musst du zweimal [Enter] drücken, d.h. eine Leerzeile im Markdown haben.

PPS: Bevor’s dir jemand anderes doch verrät: in den Grundeinstellungen so ziemlich aller Browser ist 1em ≙ 16px. Aber es ist nicht nötig, das zu wissen.

[MrMurphy]

Um dir konkret helfen zu können benötigen wir deine aktuelle Webseite.

Grundlage ist ein korrekter HTML-Quelltext.

Wenn der fertig ist wird das CSS erstellt. Dabei werden die CSS-Angaben und Einheiten verwendet, die für die Ausgabe am sinnvollsten sind.

Also erst der Inhalt, dann das "Aussehen".

[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

[Eric]

Sieht gut aus, danke!