Sie sind hier : basti1012.de/ tutorialscss / Flexbox-Grid.php

Flexbox Grid

A grid system based on the flex display property.

Responsive ( Reaktionsschnell )

Responsive Modifikatoren ermöglichen die Angabe unterschiedlicher Spaltengrößen, Offsets, Ausrichtung und Verteilung in den Darstellungsfeldbreiten xs, sm, md und lg.

<div class="row">

    <div class="col-xs-12

                col-sm-8

                col-md-6

                col-lg-4">

        <div class="box">Responsive</div>

    </div>

</div>

Fluid ( Flüssigkeit )

Prozentbasierte Breiten ermöglichen das Ändern der Größe von Spalten und Zeilen.

.col-xs-6 {

  flex-basis: 50%;

}

Simple Syntax

Alles, woran Sie sich erinnern müssen, ist Zeile, Spalte, Inhalt..

<div class="row">

    <div class="col-xs-12">

        <div class="box">12</div>

    </div>

</div>

Offsets

Versetzen Sie eine Spalte

<div class="row">

    <div class="col-xs-offset-3 col-xs-9">

        <div class="box">offset</div>

    </div>

</div>

Automatische Breite

Fügen Sie einer Zeile eine beliebige Anzahl von Spalten mit automatischer Größenänderung hinzu. Lassen Sie das Gitter es herausfinden.

<div class="row">

    <div class="col-xs">

        <div class="box">auto</div>

    </div>

</div>

Geschachtelte Gitter

Raster innerhalb der Raster innerhalb der Raster.

<div class="row">

    <div class="col-xs">

        <div class="box">

            <div class="row">

                <div class="col-xs">

                    <div class="box">auto</div>

                </div>

            </div>

        </div>

    </div>

</div>

Ausrichtung

Fügen Sie Klassen hinzu, um Elemente am Anfang oder Ende einer Zeile sowie am oberen, unteren oder mittleren Rand einer Spalte auszurichten.

.start-

<div class="row start-xs">

    <div class="col-xs-6">

        <div class="box">

            start

        </div>

    </div>

</div>

.center-


<div class="row center-xs">

    <div class="col-xs-6">

        <div class="box">

            start

        </div>

    </div>

</div>

.end-


<div class="row end-xs">

    <div class="col-xs-6">

        <div class="box">

            end

        </div>

    </div>

</div>

Hier ist ein Beispiel für die Verwendung der Modifikatoren in Verbindung mit der Erzielung einer unterschiedlichen Ausrichtung bei unterschiedlichen Ansichtsfenstergrößen..

Example
<div class="row center-xs end-sm start-lg">

    <div class="col-xs-6">

        <div class="box">

            All together now

        </div>

    </div>

</div>

.top-

<div class="row top-xs">

    <div class="col-xs-6">

        <div class="box">

            top

        </div>

    </div>

</div>

.middle-

<div class="row middle-xs">

    <div class="col-xs-6">

        <div class="box">

            center

        </div>

    </div>

</div>

.bottom-

<div class="row bottom-xs">

    <div class="col-xs-6">

        <div class="box">

            bottom

        </div>

    </div>

</div>

Verteilung

Fügen Sie Klassen hinzu, um den Inhalt einer Zeile oder Spalte zu verteilen.

.around-

<div class="row around-xs">

    <div class="col-xs-2">

        <div class="box">

            around

        </div>

    </div>

    <div class="col-xs-2">

        <div class="box">

            around

        </div>

    </div>

    <div class="col-xs-2">

        <div class="box">

            around

        </div>

    </div>

</div>

.between-

<div class="row between-xs">

    <div class="col-xs-2">

        <div class="box">

            between

        </div>

    </div>

    <div class="col-xs-2">

        <div class="box">

            between

        </div>

    </div>

    <div class="col-xs-2">

        <div class="box">

            between

        </div>

    </div>

</div>

Neuordnung

Fügen Sie Klassen hinzu, um Spalten neu anzuordnen.

.first-

1
2
3
4
5
6
<div class="row">

    <div class="col-xs-2">

        <div class="box">

            1

        </div>

    </div>

    <div class="col-xs-2">

        <div class="box">

            2

        </div>

    </div>

    <div class="col-xs-2 first-xs">

        <div class="box">

            3

        </div>

    </div>

</div>

.last-

1
2
3
4
5
6
<div class="row">

    <div class="col-xs-2 last-xs">

        <div class="box">

            1

        </div>

    </div>

    <div class="col-xs-2">

        <div class="box">

            2

        </div>

    </div>

    <div class="col-xs-2">

        <div class="box">

            3

        </div>

    </div>

</div>

Umkehren

.reverse

1
2
3
4
5
6
<div class="row reverse">

    <div class="col-xs-2">

        <div class="box">

            1

        </div>

    </div>

    <div class="col-xs-2">

        <div class="box">

            2

        </div>

    </div>

    <div class="col-xs-2">

        <div class="box">

            3

        </div>

    </div>

</div>