Na navigaci | Klávesové zkratky

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.

Komentáře

  1. Howard #1

    Já jsem si zas užil před cca 2 roky position: fixed a bottom: 0 na iPadu. Co dodat, prostě mobilní safari a apple.

    před 8 lety | reagoval [2] Lex
  2. Lex #2

    avatar

    #1 Howarde, Howard: Kdybys mi to pověděl před půl rokem, nemusel bych zabít týden laděním na ios simulátoru. Teď už ale vim oč jde :)

    před 8 lety
  3. Lex #3

    avatar

    A David by mohl do náhledu komentáře dát stejný renderer jako ten výstupní.. abych nevypadal jako idiot že za Reply ještě jednou napíšu mention. :D

    před 8 lety
  4. Bohouš #4

    Jak se ITemplateFactory předává informace o tom, jakou má použít šablonu?

    před 8 lety

Tento článek byl uzavřen. Už není možné k němu přidávat komentáře.


phpFashion © 2004, 2022 David Grudl | o blogu

Ukázky zdrojových kódů smíte používat s uvedením autora a URL tohoto webu bez dalších omezení.