Internet Service

Die CSS3-Eigenschaft "Flexbox" sorgt für flexible Größen und Abstände und ist besonders wichtig für die mobile Darstellung von Webseiten. Auf den Webseiten der Universität verwenden beispielsweise die "Startseiten-Boxen" diese CSS-Eigenschaft.

Wichtig dabei ist, dass um alle Boxen-Elemente immer ein Element mit der Klasse "flexcontainer" angelegt wird:
<div class="bild-boxen flexcontainer">
  <div class="boxen breite2"></div>
  <div class="boxen"></div>
  <div class="boxen"></div>
  <div class="boxen breite2"></div>
  <div class="boxen breite3"></div>
</div>

Alle Elemente, die sich im Flexcontainer befinden, werden automatisch in der Höhe angeglichen, so dass das Gesamterscheinungsbild recht aufgeräumt wirkt. Das Element mit dem meisten Inhalt gibt die Höhe für die entsprechende Bild-Reihe vor.

Hier finden Sie eine Anleitung zur Einbindung der Startseiten-Boxen:
→ "Einbindung von Bild- und Textboxen auf Ihrer Startseite"

Schematische Darstellungen der Container

Im Folgenden finden Sie die Darstellung der Boxen auf unterschiedlichen mobilen Endgeräten. Hier wurde die Variante mit maximal 3 Boxen pro Reihe gewählt wie es auf Folgeseiten üblich ist. Bei Startseiten werden häufig 4 Boxen pro Reihe gesetzt.

Desktop-Ansicht:

Tablet-Ansicht:

Smartphone-Ansicht:

Alternativ zu den Startseiten-Boxen

Hier finden Sie ein alternatives Beispiel für den Einsatz von Flexboxen auf den Uni-Seiten:
→ "Bielefeld kennenlernen - Zahlen, Daten, Fakten"

Falls Sie daran interessiert sind Flexboxen dieser Art auf Ihren Seiten einzubinden, aber nicht wissen wie Sie diese umsetzen sollen, wenden Sie sich gerne an die Web-Entwicklung.

Weiterführende Links

Ausführliche Anleitungen zu CSS Flexbox gibt es hier:
→ css-tricks.com
→ w3schools.com