zurück zur absoluten Positionierung mit Prozent / Zum nächsten Experiment / Zur Startseite

CSS Flexbox-Möglichkeiten

externe Links zu CSS/Grid-Themen

Beispiele

Basics

Box:
display: flex; Item:
margin: 10px;padding: 5px;
(1)Warum ist es so wie es ist? Das alles?
(2)Wenn man es doch nicht ändern kann - oder zumindest das Gefühl hat.
(3)Wer hat noch das Gefühl, dass wir von irgendwem verarscht werden? Manchmal kommt es einem so vor oder?

Basics demonstration auto-stretch

Box:
display: flex;
height: 200px;
 Item:
margin: 10px;padding: 5px;
Warum ist es so wie es ist? Das alles?
Wenn man es doch nicht ändern kann - oder zumindest das Gefühl hat.
Wer hat noch das Gefühl, dass wir von irgendwem verarscht werden? Manchmal kommt es einem so vor oder?

Geht auch mit Block-Elementen

Box:
display: flex;
height: 200px;
 Item:
margin: 10px;padding: 5px;
Warum ist es so wie es ist? Das alles?
Wer hat noch das Gefühl, dass wir von irgendwem verarscht werden? Manchmal kommt es einem so vor oder?

flex-direction:column

Box:
display: flex;
flex-direction: column;
height: 200px;
 Item:
margin: 10px;padding: 5px;
Warum ist es so wie es ist? Das alles?
Wenn man es doch nicht ändern kann - oder zumindest das Gefühl hat.
Wer hat noch das Gefühl, dass wir von irgendwem verarscht werden? Manchmal kommt es einem so vor oder?

flex-direction:anders rum, in dem Beispie column-reverse (row-reverse geht auch)

Box:
display: flex;
plex-direction: column-reverse;
height: 250px
Item:
margin: 10px;padding: 5px;
Warum ist es so wie es ist? Das alles?
Wenn man es doch nicht ändern kann - oder zumindest das Gefühl hat.
Wer hat noch das Gefühl, dass wir von irgendwem verarscht werden? Manchmal kommt es einem so vor oder?

Beispiel: justify-content (flex-start)

Box:
display: flex;
justify-content: flex-start;

Item:
margin: 10px;padding: 5px;
1A
2B
3C

Beispiel: justify-content (center) and column-reverse in Kombination

Box:

display: flex;
justify-content: center;
flex-direction: column-reverse;
height: 200px;

Item:
margin: 10px;padding: 5px;
1A
2B
3C

Beispiel: justify-content (mit space around)

Alternative: space-between

Box:
display: flex;
justify-content: space-around;
flex-direction: row;
height: 50px;


Item:
margin: 10px;padding: 5px;
1A :-)
2B :-|
3C :-(
4D :-O

Beispiel: justify-content (mit space between) und align-items: center;

Alternative: space-around

align-items möglichkeiten: start center end stretch (stretch ist default)

Box:
display: flex;
justify-content: space-around;
flex-direction: row;
align-items:center;
height: 120px;


Item:
margin: 10px;padding: 5px;
1A :-)
2B :-|
3C :-(
4D :-O

Beispiel: justify-content (mit space between) und align-items: center; VERTIKAL

align-items möglichkeiten: start center end stretch (stretch ist default)

Box:
display: flex;
justify-content: space-between;
flex-direction: column;
align-items:center;
height: 300px;
width: 200px


Item:
margin: 10px;padding: 5px;
1A :-)
2B :-|
3C :-(
4D :-O

Beispiel: justify-content (mit space between) und align-items: flex-end; VERTIKAL

align-items möglichkeiten: start center flex-end stretch (stretch ist default)

Box:
display: flex;
justify-content: space-between;
flex-direction: column;
align-items:flex-end;
height: 300px;
width: 200px


Item:
margin: 10px;padding: 5px;
1A :-)
2B :-|
3C :-(
4D :-O

Beispiel: flex-wrap: wrap

Box:
display: flex;
flex-direction: row;
flex-wrap:wrap;


Item:
margin: 11px;padding: 5px;width: 200px; border:solid grey;
1A :-)
2B :-|
3C :-(
4D :-O
5E :-X
6D :-/