Differenze tra le versioni di "Aiuto:Manuale di stile/Avanzato"

* Alcuni browser possono dare problemi quando si utilizzano <code>flex</code> annidati, ossia elementi <code>flex</code> il cui padre è a sua volta un <code>flex</code>, mentre non sembrano esserci problemi quando il <code>flex</code> è un antenato più vecchio del padre. Nello specifico si sono rivelati potenzialmente problematici Safari ed i browser basati su Chromium (tra i quali rientrano Chrome, Opera, Vivaldi, Edge), mentre Firefox dovrebbe esserne "immune". Per questo motivo quando si utilizzano <code>flex</code> annidati è sempre meglio controllare che non ci siano problemi, eventualmente chiedendo a qualcuno che utilizzi questi browser se la pagina si vede bene.

* Quando si fissa la larghezza di un elemento (per esempio tramite le classi <code>width-__-__</code> descritte in precedenza), è importante notare che tale larghezza '''non''' comprende eventuale margine, e ciò può produrre effetti indesiderati. Se per esempio si ha un padre <code>flex</code> contenente due elementi con <code>width-xl-50</code> e un po' di <code>margin</code>, intuitivamente questi dovrebbero essere affiancati ed occupare metà larghezza ciascuno, ma in pratica questo <code>margin</code> fa sì che la larghezza effettiva diventi superiore a 50%, e quindi manda a capo. Un possibile workaround consiste nello "sdoppiamento" dell'elemento: si utilizza un <code><nowiki><div></nowiki></code> che abbia la larghezza voluta e <code>padding</code> pari al margine voluto, ed al suo interno si mette l'elemento senza impostarne la larghezza, che è già stabilita dal padre.

 

<nowiki>

<div class="flex flex-row flex-wrap" style="background: #000; padding: 0.2em;">

</div>

{{-}}

<div class="flex flex-row flex-wrap" style="background: #000; padding: 0.2em;">

</div>

</nowiki>

 

<div class="flex flex-row flex-wrap" style="background: #000; padding: 0.2em;">

</div>

{{-}}

<div class="flex flex-row flex-wrap" style="background: #000; padding: 0.2em;">

</div>