DA-Flexgrid 1.2.1 das Framework – Einstiegstutorial

DA-Flexgrid Basiert auf das Eindimensionale Grid CSS3 Modell Flexbox dabei werden Raster in einen Eltern Element platziert mit hilfe des Elternelements => FLEXBOX CONTAINER  die darin Enthaltenden Kind Elemente nennt man => FLEXBOX ITEMS.

 

Die Grafik verdeutlich das FLEXBOX MODELL auf denen DA Flexgrid Basiert.

Ein Beispiel ohne DA-Flexgrid aber auf Basis des FLEX Modell realisiertes Flexbox Modell:

CSS 3 Code:

#flex-container {display:flex; width:95%; margin:0px auto;flex-direction:row;-webkit-flex-direction:row;flex-wrap:wrap;-webkit-flex-warap:wrap;justify-content:space-between;} .flex-item { Flex-shrink:0;flex-grow:0; Flex-basis:33,33%; min-height:200px;}

Erläuterungen zum CSS Code:
Mit den Befehl: display:Flex; legen wir fest das es sich um die ID #flex-Container um eine Flex Eltern Element handelt. mit flex-direction:row; legen wir fest das alle Kind Elemente nacheinannder Platziert werden sollen mit column würden Sie Vertikal Platziert. mit Justify-Content:space-Between legen wir fest das die äußeren Kind Element sich außen Platzieren und alle anderen den Freien raum nutzen.

Bei der Klasse .flex-item handelt es sich um das Kind Elemt also die besagten Flex Items hier gibt es Feste Werte:
Flex-Shrink: Das element darf nicht schrumpfen, Flex-Grow: Das Elemet darf nicht Wachsen Flex-Basis: die Breite des Element ist 33,33%;

Der HTML5 Code

<section id="flex-container">
<article class="flex-item"></article>
<article class="flex-item"></article>
<article class="flex-item"></article>
</section>

Das Grundprinzip des Flexmodells ist also das alle Elemente innerhalb des Eltern Elements je nach direction Platzieren. In unseren Beispiel Platziert sich flex-items immer mit gleicher Größe mit der Platzausnutzung und freien raum.

 

DA Flexgrid Basiert im prinzip auch auf diese weise nur haben wir hier ein Framework das Feste Klassen Verwendet.

Beispiel DA- Flexcontainer>

.flexgrid-container-center-95
{display:flex;width:95%;margin:0 auto;flex-direction:row;-webkit-flex-direction:row;flex-wrap:wrap;-webkit-flex-warap:wrap;justify-content:space-between}

 

Beispiel DA-Flex Items

.flexgrid-col-4
{flex-basis:33.33%;flex-grow:0;flex-shrink:0}

Der HTML5 Code mit DA-Flexgrid

<section id="flex-container-95">
<article class="flexgrid-col-4"></article>
<article class="flexgrid-col-4"></article>
<article class="flexgrid-col-4"></article>
</section>

Also das gleiche Grundprinzip, Nur das wir bereits hier ein Fester GRID Framework nutzen das variabel einsetzbar ist.  Mit dem Flexbox Modell ist das Floaten entgültig vorbei. Denn auch Mobil First Design Entwicklung ist mit den Flexbox Modell möglich.
DigitalArt Entwickelt DA-FlexGrid laufend weiter. Bald kommen weitere Module hinzu aber auch die CSS3 GRID Technik wird mit DA-Flexgrid ab Version 2.0 möglich. Die Version 1.2.1 wird derzeit von allen modernen Browser unterstützt. die CSS3 GRID Technik leider noch nicht.

Fakten zu DA-Flexgrid:
Version: 1.2.1
Version Stufe: Beta
Nutzung: GPL wird aber aktuell nur von DigitalArt genutzt bzw. Partnerfirmen.

Geplante Module:
CSS3 Dynamics: Animationen mit CSS3 und LESS – Technologie  Version 2.0