CSS/Tutorials/variable Elemente nebeneinander

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

Das Layout soll die Überschrift als linke Box, den Textabsatz als rechte positionieren. Dabei soll sich die Breite des Absatzes am verfügbaren Platz, der neben der Überschrift bleibt, orientieren.[1]

Mit Flexbox können Sie den verfügbaren Leerraum verteilen:

Beispiel: Formular ansehen …
<section>
  <h2>Überschrift</h2>
  <p>Dieser Textabsatz könnte breiter sein, als der verfügbare Platz. Deshalb wird er umbrechen. 
     Aber wo bleibt die Überschrift?
  </p>
</section>
   @media (min-width: 20em) {
      section {
         display: flex;
         align-items: center;
      }
      section p {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: auto;
      }
   }
Die shorthand-flex-Eigenschaft regelt wie sich flexible Elemente an den tatsächlich verfügbaren Platz anpassen, indem es die Leerräume zwischen den Elementen gleichmäßig verteilt. Mit flex-grow und flex-shrink können Sie Wachstum- und Schrumpffaktoren bestimmen, die das Verhalten bei geringeren und breiteren Breiten regelt.
Der Textabsatz erhält durch den Wert auto für flex-basis eine flexible Breite, die durch den Wachstumsfaktor und Schrumpfungsfaktor von je 1 begrenzt wird.

Quellen[Bearbeiten]

  1. Frage im Self-Forum: zwei variabel breite Elemente zwingend nebeneinander vom 29.04.2016