Пример выравнивания 2 блоков в контейнере Flex

flex на живих примерах с демонстрацией кода и вида вживую. Онлайн примеры.

Толкование примеров - laughing смотреть

Пример 1

display:flex; flex-flow:column wrap; justify-content: space-between;

*
**

Пример 2

display:flex; flex-flow:column wrap; justify-content: space-around;

*
**

Пример 3

display:flex; flex-flow:column wrap; justify-content: space-evenly;

*
**

Пример 1.1

display:flex; flex-flow:row wrap; justify-content: space-between;

*
**

Пример 2.1

display:flex; flex-flow: row wrap; justify-content: space-around;

*
**

Пример 3.1

display:flex; flex-flow:row wrap; justify-content: space-evenly;

*
**

Пример 4

display:flex; flex-flow:column wrap; justify-content: end;

*
**

Пример 5

display:flex; flex-flow:column wrap; justify-content: center;

*
**

Пример 6

display:flex; flex-flow:column wrap; justify-content: start;

*
**

Пример 4.1

display:flex; flex-flow:row wrap; justify-content: end;

*
**

Пример 5.1

display:flex; flex-flow: row wrap; justify-content: center;

*
**

Пример 6.1

display:flex; flex-flow:row wrap; justify-content: start;

*
**

Пример 7

display:flex; flex-flow:column wrap; justify-content: stretch;

*
**

Пример 8

display:flex; flex-flow:column wrap; justify-content: left;

*
**

Пример 9

display:flex; flex-flow:column wrap; justify-content: right;

*
**

Пример 7.1

display:flex; flex-flow:row wrap; justify-content: stretch;

*
**

Пример 8.1

display:flex; flex-flow: row wrap; justify-content: left;

*
**

Пример 9.1

display:flex; flex-flow:row wrap; justify-content: right;

*
**