CSS/Tutorials/Ausrichtung/variable Elemente nebeneinander
In diesem Kapitel werden einige Beispiele vorgestellt, wie man Webseiten auflockert, indem Elemente bei genügend breitem Viewport nebeneinander angeordnet werden können.
Inhaltsverzeichnis
Überschrift links
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:
<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;
}
}
Pull quote links
Links neben den Text soll eine „Seitenansprache“ (engl. "pull quote"), bestehend aus Überschrift und einem Textabsatz positioniert werden. Die Anzahl der Textabsätze rechts soll flexibel sein.
<header>
<h2>Der Greenscreen</h2>
<p>Faszinieren Sie Ihre Gäste mit Fotomontagen der besonderen Art</p>
</header>
Als semantisch passendes Container-Element wird ein header verwendet. Die Auszeichnung als h2 und p hat nichts damit zu tun, was davon in größerer Schrift dargestellt wird.
Nun wird der Bereich von .info
(bei genügend breitem Viewport und Browserunterstützung von grid) in 2 Spalten info-header
und info-body
geteilt:
@supports (display: grid) {
@media (min-width: 40em) {
.info {
display: grid;
grid-template-columns:
[info-header-start] 1fr
[info-header-end info-body-start] 1fr
[info-body-end];
grid-template-rows: 1fr 1fr;
}
}
}
Der header kommt in die Spalte info-header
; der Rest in info-body
:
.info header
{
grid-column: info-header;
grid-row: 1 / -1;
}
.info > *
{
grid-column: info-body;
}
grid-template-rows/grid-row
ist nötig, damit header die ganze Höhe füllen kann und nicht die Höhe der ersten Zelle in der Nachbarspalte bestimmt.
Page Floats
Sie werden es in diesem Tutorial schon gemerkt haben: Die Optimierung moderner Webseiten für mobile Geräte (Mobile First!) hat dazu geführt, dass mehrspaltige Layouts immer mehr in den Hintergrund geraten sind.
Trotzdem ist es sinnvoll und empfehlenswert bei größeren Viewports den vorhandenen Platz gut auszunutzen und analog zum Printdesign Textwüsten durch Abbildungen, Unterüberschriften und Pull Quotes aufzulockern.
W3C und WHATWG entwerfen zur Zeit einen First Public Working Draft von Page Floats, einem Modell, in dem diese figures (Abbildungen) innerhalb der flexiblen Spalten oben oder unten am Rand gefloatet werden können.[2]
Die float-Eigenschaft erhält so zwei weitere Werte:
-
inline-start
-
inline-end
Im Unterschied zu einer reinen rechts-links-Positionierung sind diese neuen Werte zweidimensional.[3] Bis jetzt (Stand Jahreswechsel 2020) werden sie nur vom Firefox unterstützt.
img {
width: 100%;
margin: 1em 0 0;
float: inline-start;
}
Während das Beispiel auf schmalen Viewports responsiv ist und gut aussieht; werden die Bilder in der breiten Ansicht im Textfluss dargestellt und nicht dort, wo float: inline-start
sie eigentlich positionieren will. So entstehen manchmal unschöne Einzelzeilen am Ende der Spalte.
Siehe auch
Quellen
- ↑ Frage im Self-Forum: zwei variabel breite Elemente zwingend nebeneinander vom 29.04.2016
- ↑ W3C: CSS Page Floats vom W3C First Public Working Draft, 15 September 2015)
- ↑ W3C: 2.2. Flow-Relative Values for the float and clear Properties
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.