Flexbox - Abstände

[WolfgangW]

Hallo Flexbox-Spezialisten,

ich benötige auf jeder Seite zwei Spalten (Breite: 1 x ca. 75% + 1 x 25%).
Bisher habe ich mit Rocksolid-Columns gearbeitet.
Da ich aber die Spaltenlänge einheitlich lang bekommen möchte, bin ich auf 'Flexbox' umgestiegen.

Mein Problem dabei ist:
- Zwischen den beiden Spalten soll ein entsprechender Abstand
- mit 'Margin' sind mir die Ränder aber auf dem Smartphone zu groß
- 'space-between' hilft mir dabei auch nicht weiter ...
- habe das Problem jetzt mit der Trickkiste aus historischen Zeiten (Blindgif) gelöst
Frage an die Spezialisten: Wie löst man das Problem professionell, bevor ich wieder mit verschachtelte Tabellen beginne?

Die entsprechende Seite dazu:
http://www.netzwerk-wickrath.de/cms/fahrradtouren.html

Sonnige Grüße aus dem Rheinland

[jscholtysik]

Hallo Wolfgang,

ich hab das gerade mal ausprobiert. Das kannst Du mal so in Codepen oder im Webmaker unter Chrome testen.

Damit hast Du:

- zwischen den beiden Spalten einen entsprechenden Abstand (width der beiden Spalten < 100% und justify-content: space-between, in meinem Beispiel haben die Spalten zusammen 95%, die restlichen 5% sind für den Abstand dazwischen und die Spalten werden an die Ränder links und rechts gedrückt)
- die Zeile mit den Container und den Flexbox-Elementen wird auf 70% eingestellt und zentriert
- der Flex-Container bekommt eine feste Höhe, hier z.B. 300px, d.h. die Flexbox-Elemente werden vertikal auf die maximal Höhe des Container durch das align-items: stretch vergrößert
- den Rand auf den mobilen Geräten kannst Du ja beliebig mit der Breite des Containers anpassen, indem Du z.B. die Breite auf 90% setzt. Bsp.: unter 800px 90%, unter 1000px 80% usw.

Und das kannst Du ja für jeden horizontalen Flexbox-Container wiederholen.

HTML:

<div id="container">
    <div class="box1">
        Text 1                                    
    </div>
    <div class="box2">
        Text 2                                    
    </div>
</div>

CSS:

#container
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    height: 300px;
    margin: 0 auto;
    width: 70%; 
}

.box1
{
    width: 72.5%;
    background-color: green;
}

.box2
{
    width: 22.5%;
    background-color: blue;
}

[WolfgangW]

Hallo jscholtysik,

mit Deinem Ansatz bin ich schon etwas weitergekommen. DANKE
Habe den Container auf 100% gesetzt (möchte ja die volle Breite haben), dann ist der Aufbau schon einmal perfekt.
Was jetzt noch fehlt, dass die Boxen auf den mobilen Geräten untereinander stehen.
Habe mal schnell ein 'flex-wrap: wrap;' eingesetzt, jedoch ohne Reaktion.
Werde noch etwas tüfteln ...

[jscholtysik]

Hi Wolfgang,

da würde ich dann mit Media Queries arbeiten und dort flex-direction: column; setzen, d.h. bei einer bestimmten Breite ändert sich dann einfach die Anordnung der Flex-Elemente auf vertikal. Und zusätzlich würde ich dann die Breite der Boxen untereinander auf 90% setzen (oder auf einen Wert, der Dir besser passt).

[Andreas]

Schau dir das mal bei diesen beiden Flex-Grids ab
http://jeroenoomsnl.github.io/the-flex-grid/
http://flexboxgrid.com/

Das ist eigentlich alles recht simpel. Der Knackpunkt ist, dass jeder "Inhalt" noch einen extra Wrapper (Box) bekommt. So kannst du einheitliche Boxen und Abstände erstellen.

Reihe - display:flex; flex-flow:row wrap; margin:0 -1rem;
    Box - padding:0 1rem; flex-basis:75%;
        Content - Whatever
    Box - padding:0 1rem; flex-basis:25%;
        Content - Whatever

Zusätzlich zur flex-basis wird der gleiche Wert auch noch mit max-width gesetzt. box-sizing:border-box; ist auch noch erforderlich, weil die Boxen ein Padding haben. Mit Margin würde das nicht gehen, weil es keinen box-sizing Wert gibt, welcher das Margin aus der Gesamtbreite rausrechnet so wie mit Padding und border-box. Das ist auch der Grund, warum ein extra Wrapper benötigt wird.

Bei den Breakpoints brauchst du dann nur die flex-basis und max-width zu ändern.

[WolfgangW]

Ich bin jetzt zu folgendem - simplen - Ergebnis gekommen:

Für den benötigten Zwischenraum habe ich eine extra 'unsichtbare' Box mit zwei Leerstellen definiert.
Zum Glück nimmt das der Contao-Editor ohne hinzufügen von sonstigen Quelltext an.
Die Aufteilung nach Prozent war grundsätzlich eine gute Idee, jedoch wurde die 5% Lücke immer schmäler, je mehr man den Browser verkleinert. Die Breite der Boxen habe ich mit 'flex-grow' gewichtet.

Bei 700 Pixel und weniger habe ich via Media Queries folgendes geändert:
Die Flexbox wandelt sich dann von der horizontalen Ansicht in die vertikale = flex-direction: column. Die einzelnen Boxen sind dann 100% breit und meine dritte Box als Platzhalter hat sich mit der Einstellung 'display: none' verabschiedet.

Es funktioniert und war für mich der einfachste Weg.

Den Helfern und Tippgebern VIELEN DANK.

[Andreas]

Weil's so schön ist, hier nochmal ne Lösung für dich ohne extra Container

.flexbasic {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    margin: 0 -10px;
    /* width: 100%; */
}
.hellblauflex {
    /* min-height: 200px; */
    flex-basis: calc(75% - 20px);
    /* flex-grow: 4; */
    /* margin: 0px; */
    /* margin-bottom: 5px; */
    padding: 20px;
    background-color: rgba(120,248,255,0.2);
    border: 1px solid #0696b0;
    border-radius: 10px;
    /* -moz-border-radius: 10px; */
    /* -khtml-border-radius: 10px; */
    /* -webkit-border-radius: 10px; */
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .2);
    margin: 10px;
}
.hellgruenflex {
    /* min-height: 200px; */
    flex-basis: calc(25% - 20px);
    /* flex-grow: 1; */
    border: 1px solid #008e5c;
    background-color: rgba(166,210,198,0.2);
    padding: 20px;
    /* margin: 0px; */
    /* margin-bottom: 5px; */
    border-radius: 10px;
    /* -moz-border-radius: 10px; */
    /* -khtml-border-radius: 10px; */
    /* -webkit-border-radius: 10px; */
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .3);
    margin: 10px;
}

/* breakpoint */
.hellblauflex,
.hellgruenflex {
    flex-basis: calc(100% - 20px);
} 

Auf's Wesentliche reduziert sieht das also so aus

.flexbasic {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px; /* gutter 20px */
}
.hellblauflex {
    flex-basis: calc(75% - 20px); /* gutter 20px */
    padding: 20px;
    margin: 10px; /* gutter 20px */
}
.hellgruenflex {
    flex-basis: calc(25% - 20px); /* gutter 20px */
    padding: 20px;
    margin: 10px; /* gutter 20px */
}

/* breakpoint */
.hellblauflex,
.hellgruenflex {
    flex-basis: calc(100% - 20px);
} 

Ich würde dir auch empfehlen den Flex-Container außerhalb der CEs vom Typ Text zu setzen

<!-- alt -->
<div class="ce_text flexbasic block">
  <div class="hellblauflex">
  <div class="hellgruenflex">
</div>

<!-- neu -->

<!-- CE HTML -->
<div class="flexbox">
  <!-- CE text -->
  <div class="ce_text col-75 hellblau">
  <!-- CE text -->
  <div class="ce_text col-25 hellgruen">
<!-- CE HTML -->
</div>

Wenn die Flex-Items die einzigen CEs sind, kannst du auch direkt den Artikel als Flex-Container benutzen und diesem die Klasse "flexbox" geben.

[WolfgangW]

Sorry Andreas,

die Idee, die 20 Pixel abzuziehen, kann ich gedanklich nachvollziehen, funktioniert aber aus irgendeinem Grund nicht richtig:
http://www.welters-online.de/flex

Trotzdem vielen Dank für die nette 'Nachbarschaftshilfe' !!!

[Andreas]

Das war nicht zum einfachen copy and paste gedacht. Es fehlte das box-sizing, das max-width, der Breakpoint und du hattest noch einen Fehler eingebaut (fehlendes Semikolon). Das hier kannst du jetzt mal abkopieren.

body {
  margin: 0;
  overflow: hidden; /* nur für Testumgebung, damit keine Scrollbalken erscheinen, wegen der -10px margin */
}
.flexbasic {
  display: flex;
  flex-flow: row wrap;
  margin-left:  -10px;
  margin-right: -10px;
}
.flexbasic > * { /* direkte Kinder */
  padding: 20px;
  border: 1px solid #0696b0;
  border-radius: 10px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .2);
  margin: 10px;
  box-sizing: border-box;
}
.hellblauflex {
  flex-basis: calc(75% - 20px);
  max-width:  calc(75% - 20px);
  background-color: rgba(120, 248, 255, .2);
}
.hellgruenflex {
  flex-basis: calc(25% - 20px);
  max-width:  calc(25% - 20px);
  background-color: rgba(166, 210, 198, .2);

}

/* Breite kleiner 960px */
@media (max-width: 959px) {
  .hellblauflex,
  .hellgruenflex {
    flex-basis: calc(100% - 20px);
    max-width:  calc(100% - 20px);
  }
} 

[WolfgangW]

Kompliment Andreas,
das war eine echte Meisterleistung !!!

http://welters-online.de/flex/index1.html

Soweit ist mein Wissensstand leider noch nicht ...
... aber ich arbeite daran und habe die Hoffnung noch nicht aufgegeben!

[Andreas]

Danke, gerne. Ich arbeite gerade an einem flex-grid für Contao, welches man mit dma_simple_grid aufsetzen kann.