Select Page

After "next generation floating" in HTML

by | Oct 9, 2014 | Development

Gang und gäbe ist mittlerweile der Gebrauch von umfließenden Container in HTML (float). Allerdings führt das oft zu Problemen wenn man z.B mit unterschiedlichen Abständen und Positionierungen hantiert. Außerdem ist dieses Modell einfach umständlich und grausig zu implementieren.
Mit einem W3C Vorschlag Ende 2013 hielt das “Flexible Box Layout Module” Einzug in den CSS3 Standard. Die Idee hat man schon früher in der graphischen Programmierung. Innerhalb eines Containers wird eine unbestimmte Menge an Elementen untergebracht. Die Aufteilung der verfügbaren Breite erfolgt anhand von Anteilen.
Knapp ein Jahr später ist das Feature auch in den meisten Browsern verfügbar (Versionen später als November 2013).
Ein Beispiel
CSS:

.flex-container {
    display: flex;
}
.flex-item {
    flex: 1 1 auto;
    border: 1px #ff8000 solid;
}

HTML1 (gleiche Aufteilung):

Column 1
Column 2
Column 3

HTML2 (unterschiedliche Aufteilung):

Column 1
Column 2
Column 3
Column 4
Column 5

Weitere Informationen (z.B. Ausbreitung und Ausrichtung) findet man in den folgenden Links:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/
Fazit: Endlich geile Container 😉

Marius Hein
Marius Hein
Head of IT Service Management

Marius Hein ist schon seit 2003 bei NETWAYS. Er hat hier seine Ausbildung zum Fachinformatiker absolviert und viele Jahre in der Softwareentwicklung gearbeitet. Mittlerweile ist er Herr über die interne IT und als Leiter von ITSM zuständig für die technische Schnittmenge der Abteilungen der NETWAYS Gruppe. Wenn er nicht gerade IPv6 IPSec Tunnel bohrt, sitzt er daheim am Schlagzeug und treibt seine Nachbarn in den Wahnsinn.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

More posts on the topic Development

Mein PHP-Trainingsprojekt

PHP Schulung Vor kurzem haben wir begonnen, eine neue Programmiersprache zu lernen – PHP. In der ersten Woche haben wir mit den Grundlagen wie Variablen, Arrays, Schleifen begonnen und uns schrittweise zu komplizierterer Syntax wie Funktionen, Objekten und Klassen...

check_prometheus ist jetzt öffentlich verfügbar!

Monitoring ist komplex, das wissen wir hier bei NETWAYS leider zu gut. Deswegen laufen in der Infrastruktur auch mal gerne mehrere Tools für die Überwachung. Zwei gern gesehene Kandidaten sind dabei Icinga und Prometheus. Icinga und Prometheus erfüllen...