Nefunguje ti flexbox na iPadu, co?

Jak zprovoznit CSS Flexbox na iOS zařízeních aneb pár poznámek pro sebe, až zase příště budu zoufat, proč to neflexí, a tápat v paměti, jak jsem to minule vyřešil.

Prefixy

Safari stále ještě, i ve verzi 8.1, vyžaduje pro Flexible Box prefixy. Jsi opět překvapený, že? Takže tam hezky doplň display: -webkit-flex nebo -webkit-flex-wrap: wrap atd.

Pořadí

Záleží na pořadí deklarací! Tohle funguje:

	-webkit-flex-wrap: wrap;
	-webkit-justify-content: space-between;
	flex-wrap: wrap;
	justify-content: space-between;
	display: -webkit-flex;
	display: flex;

Zatímco tohle pořadí, které se ti líbí více, na iPhone a iPadu vůbec neflexí:

	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	-webkit-justify-content: space-between;

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

Jak udělat mezeru mezi prvky?

Řešíš, jak zajistit minimální mezeru mezi prvky v natahovacím kontejneru s justify-content: space-between? Vždycky nad tím dlouze dumáš, googlíš to a nikdy jsi nic nevygooglil.

Mezera má být natahovací, ale nesmí jít pod určité minimum. A krajní prvky musí přiléhat ke kraji.

Můžeš prvkům nastavit margin-right: x a kontejneru margin-right: -x, ale to trošku rozhodí layout a na mobilu půjde stránku horizontálně posouvat. Třeba ti někdo poradí něco lepšího… Řešením je obalit kontejner do prvku s overflow: hidden.