diff options
Diffstat (limited to 'files/it/web/css/flex/index.html')
| -rw-r--r-- | files/it/web/css/flex/index.html | 200 |
1 files changed, 0 insertions, 200 deletions
diff --git a/files/it/web/css/flex/index.html b/files/it/web/css/flex/index.html deleted file mode 100644 index 1cc07d3db1..0000000000 --- a/files/it/web/css/flex/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: flex -slug: Web/CSS/flex -translation_of: Web/CSS/flex ---- -<div>{{CSSRef}}</div> - -<h2 id="Sommario">Sommario</h2> - -<p>La proprietà <strong><code>flex</code></strong> di <a href="/en-US/docs/CSS" title="CSS">CSS</a> è una proprietà <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> usata per modificare le dimensioni di un elemento flessibile e riempire gli spazi. Gli elementi flex possono essere usati per distribuire lo spazio in modo proporzionale, al loro allargarsi o al loro restringersi, per evitare sovrapposizioni o eccedenze.</p> - -<p>{{cssinfo}}</p> - -<p>Vedi <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">L'Uso di flexible boxes</a> per altre proprietà e informazioni.</p> - -<h2 id="Syntax" name="Syntax">Sintassi</h2> - -<pre class="brush:css">/* 0 0 auto */ -flex: none; - -/* Un valore, numero senza unità: flex-grow */ -flex: 2; - -/* Un valore, width/height: flex-basis */ -flex: 10em; -flex: 30px; -flex: auto; -flex: content; - -/* Due valori: flex-grow | flex-basis */ -flex: 1 30px; - -/* Due valori: flex-grow | flex-shrink */ -flex: 2 2; - -/* Tre valori: flex-grow | flex-shrink | flex-basis */ -flex: 2 2 10%; - -/* Valori globali */ -flex: inherit; -flex: initial; -flex: unset; -</pre> - -<h3 id="Values" name="Values">Valori</h3> - -<dl> - <dt><code><'flex-grow'></code></dt> - <dd>Il valore <code><a href="/en-US/docs/Web/CSS/flex-grow">flex-grow</a></code> appartiene all'elemento flex. Vedi {{cssxref("<number>")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.</dd> - <dt><code><'flex-shrink'></code></dt> - <dd>Il valore <code><a href="/en-US/docs/Web/CSS/flex-shrink">flex-shrink</a></code> appartiene all'elemento flex. Vedi {{cssxref("<number>")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.</dd> - <dt><code><'flex-basis'></code></dt> - <dd>Il valore <a href="/en-US/docs/CSS/flex-basis" title="CSS/flex-basis"><code>flex-basis</code></a> appartiene all'elemento flex. Qualsiasi valore valido per width e heigth è accettato. La dimensione con valore 0 deve avere un'unità, per evitare di essere interpretata come un valore di flessibilità. Quando non si inseriscono valori, quello predefinito è 0%.</dd> - <dt><code>none</code></dt> - <dd>Questo valore viene interpretato come: <code>0 0 auto</code>.</dd> - <dt> - <h3 id="Sintassi_formale">Sintassi formale</h3> - </dt> -</dl> - -{{csssyntax}} - -<h2 id="Example">Example</h2> - -<pre class="brush: css">#flex-container { - display: -webkit-flex; - display: flex; - -webkit-flex-direction: row; - flex-direction: row; -} - -#flex-container > .flex-item { - -webkit-flex: auto; - flex: auto; -} - -#flex-container > .raw-item { - width: 5rem; -} -</pre> - -<pre class="brush: html"><div id="flex-container"> - <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div> - <div class="raw-item" id="raw">Raw box</div> -</div> -</pre> - -<div class="hidden"> -<pre class="brush: js">var flex = document.getElementById("flex"); -var raw = document.getElementById("raw"); -flex.addEventListener("click", function() { - raw.style.display = raw.style.display == "none" ? "block" : "none"; -}); -</pre> - -<pre class="brush: css">#flex-container { - width: 100%; - font-family: Consolas, Arial, sans-serif; -} - -#flex-container > div { - border: 1px solid #f00; - padding: 1rem; -} - -#flex-container > .raw-item { - border: 1px solid #000; -} -</pre> -</div> - -<h2 id="Risultato">Risultato</h2> - -<p>{{EmbedLiveSample('Example','100%','60')}}</p> - -<h2 id="Specifications" name="Specifications">Specifiche</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Flexbox', '#flex', 'flex')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - -<p>{{CompatibilityTable()}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop("18.0")}} (behind a pref) <sup><a href="#bc1">[1]</a> <a href="#bc2">[2]</a></sup><br> - {{CompatGeckoDesktop("20.0")}} <sup><a href="#bc2">[2]</a><a href="#bc3">[3]</a></sup></td> - <td>21.0{{property_prefix("-webkit")}}<br> - 29.0</td> - <td>10.0{{property_prefix("-ms")}} <sup><a href="#flexbug8">[3]</a></sup><sup><a href="#flexbug4">[4]</a></sup><br> - 11.0 <sup><a href="#flexbug8">[3]</a></sup><sup><a href="#flexbug4">[4]</a></sup></td> - <td>12.10</td> - <td>6.1{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown()}}</td> - <td>4.4</td> - <td>11</td> - <td>12.10</td> - <td>7.1{{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<p><sup><a name="bc1">[1]</a></sup> <span id="result_box" lang="it"><span class="hps">Per attivare il supporto</span> <span class="hps">FlexBox</span> <span class="hps">per Firefox</span> <span class="hps">18 e 19</span><span>,</span> <span class="hps">l'utente deve</span> <span class="hps">cambiare la</span> <span class="hps">about:</span> <span class="hps">config</span> <span class="hps">preferenza</span> <span class="atn hps">"</span><span>layout.css.flexbox.enabled</span><span>"</span> <span class="hps">true.</span></span></p> - -<p><sup><a name="bc2">[2]</a></sup> Multi-line flexbox sono supportate da Firefox 28.</p> - -<p><sup><a name="flexbug8">[3]</a></sup> Internet Explorer 10-11 (ma non 12+) ignora l'uso di <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a>nella flex-basis parte della sintassi di flex. Questo può essere aggirato con semplici proprietà. Vedi <a href="https://github.com/philipwalton/flexbugs#8-flex-shorthand-doesnt-support-calc">Flexbug #8</a> per maggiori informazioni.</p> - -<p><sup><a name="flexbug4">[4]</a></sup> <span id="result_box" lang="it"><span class="hps">In Internet Explorer</span> <span class="hps">10-11</span> <span class="hps">(ma non</span> <span class="hps">12+)</span><span>,</span> <span class="hps">una dichiarazione</span> <span class="hps">flessibile</span> <span class="hps">con un</span> <span class="hps">valore senza unità</span> <span class="hps">nella sua parte</span> <span class="hps">flex</span><span class="atn">-</span><span>base</span> <span class="hps">è considerato</span> <span class="hps">sintatticamente</span> <span class="hps">valido e</span> <span class="hps">sarà quindi</span> <span class="hps">ignorata</span><span>.</span> <span class="hps">Una soluzione</span> <span class="hps">è quella di includere</span> <span class="hps">sempre</span> <span class="hps">una unità</span> <span class="hps">nella parte</span> <span class="hps">flex</span><span class="atn">-</span><span>base del valore di</span> </span>shorthand di<span lang="it"> <span class="hps">flex</span><span>.</span> <span class="hps">Vedi</span> </span><a href="https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored">Flexbug #4</a> <span lang="it"> <span class="hps">per ulteriori informazioni</span><span>.</span></span></p> - -<h2 id="See_also" name="See_also">Guarda altro</h2> - -<ul> - <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li> -</ul> |