1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
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><'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>
<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 > .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>
|
