2. Deceonstructed Pancake

.parent {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5em;}    
    

.child {
  flex: 0 1 15em ;
  text-align: center;}      
    

Rozlitá palačinka

Položky v řádku se hezky rozlejou jako palačinka na pánvičce.

Pokud je prostor úzký, tak se naskládají pod sebe.

Na mobilních zařízeních se pak náskládají do jednoho sloupce.

Použitím Flexboxu nebudete potřebovat mediální dotazy k zajištění velikosti obrazovky.

Zkratka flex znamená: flex: |flex-grow| |flex-shrink| |flex-basis| .

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-basic Specifikuje počáteční délku flexibilní položky.

align-self Specifikuje zarovnání pro flex položku uvnitř flex kontejneru

Pokud chcete, aby se rámečky při zalamování na další řádek roztáhly a vyplnily prostor, nastavte na 1:

.parent {display: flex;}

.child {flex: 1 1 15em;}