justify-content: space-between

Prvky jsou zarovnány na podélné ose rovnoměrně.

Petr ondříšek

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis impedit, tempore quibusdam natus itaque quidem consectetur mollitia accusantium maiores, animi et, vero voluptas voluptates molestiae ipsa alias hic minima. Aliquid.

Druhý box

Třetí box

justify-content: center

Prvky jsou zarovnány na podélné ose rovnoměrně.

Petr ondříšek

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis impedit, tempore quibusdam natus itaque quidem consectetur mollitia accusantium maiores, animi et, vero voluptas voluptates molestiae ipsa alias hic minima. Aliquid.

Druhý box

Třetí box

CSS Flex položky

order

Specifikuje pořadí zobrazení flex položek uvnitř flex kontejneru

flex-grow

Specifikuje, o kolik se flexibilní položka rozroste vůči ostatním flexibilním položkám

flex-shrink

Specifikuje o kolik se flexibilní položka zmenší vůči ostatním Flexibilním položkám

flex-basis

Specifikuje počáteční délku flexibilní položky

flex

Zkratka pro flex-grow flex-shrink flex-basis

align-self

Specifikuje zarovnání pro flex položku uvnitř blexkontejneru

W3schools

Order

Položka order upravuje pořadí boxů

1

první box

2

druhý box

3

třetí box

4

čtvrtý box