Na navigaci | Klávesové zkratky

Translate to English… Ins Deutsche übersetzen…

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 rokem | odpovědět | 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 rokem | odpovědět
  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 rokem | odpovědět
  4. Bohouš #4

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

    před rokem | odpovědět

Zanechat komentář

Text komentáře
Kontakt

(kvůli gravataru)



*kurzíva* **tučné** "odkaz":http://example.com /--php phpkod(); \--