justify-content : flex-start align-items : stretch;
justify-content: flex-start
align-items: stretch
flex-direction: row
1
2
a
a
3
4
flex-direction: row-reverse
1
2
3
4
flex-direction: column;
1
2
3
4
flex-direction: column-reverse
1
2
3
4
Hier kann man die Auswirkungen von justify-content und align-items ausprobieren. Die Flexcontainer haben eine Main-Axis, eine Cross-Axis und eine Richtung. Bei flex-direction: row und row-reverse liegt die Hauptachse auf der Horizontalen und die Cross-axis auf der Vertikalen. Bei flex-direction: colum und column-reverse ist es genau umgekehrt.
Diese verschiedenen Möglichkeiten berücksichtigen die Schreib- oder Leserichtung verschiedener Schriften. Der Wert flex-start positioniert somit die Elemente am Anfang der Schreibrichtung.
justify-content bezieht sich auf die main-axis, align-items bezieht sich auf die cross-axis.