CSS/Tutorials/variable Elemente nebeneinander

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.

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.

ansehen …