initial commit

1 files changed, 200 insertions, 0 deletions

diff --git a/files/it/web/css/flex/index.html b/files/it/web/css/flex/index.html
new file mode 100644
index 0000000000..a59a226f90
--- /dev/null
+++ b/files/it/web/css/flex/index.html
@@ -0,0 +1,200 @@
+---
+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>&lt;'flex-grow'&gt;</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("&lt;number&gt;")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.</dd>
+ <dt><code>&lt;'flex-shrink'&gt;</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("&lt;number&gt;")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.</dd>
+ <dt><code>&lt;'flex-basis'&gt;</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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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 &gt; .flex-item {
+	-webkit-flex: auto;
+	flex: auto;
+}
+
+#flex-container &gt; .raw-item {
+	width: 5rem;
+}
+</pre>
+
+<pre class="brush: html">&lt;div id="flex-container"&gt;
+    &lt;div class="flex-item" id="flex"&gt;Flex box (click to toggle raw box)&lt;/div&gt;
+    &lt;div class="raw-item" id="raw"&gt;Raw box&lt;/div&gt;
+&lt;/div&gt;
+</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 &gt; div {
+	border: 1px solid #f00;
+	padding: 1rem;
+}
+
+#flex-container &gt; .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>