blob: 6ee55743ce69115754fedfc8c1342dd804facdc0 (
plain)
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
|
---
title: flex
slug: Web/CSS/flex
translation_of: Web/CSS/flex
---
<div>{{CSSRef}}</div>
<h2 id="Resumen">Resumen</h2>
<p> </p>
<p>La propiedad CSS flex es una propiedad resumida que indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio disponible. Los elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento.</p>
<p>{{cssinfo}}</p>
<p> </p>
<p>Consulte <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS/">Cómo usar las cajas flexibles de CSS</a> para conocer más propiedades e información.</p>
<h2 id="Syntax" name="Syntax">Sintáxis</h2>
<pre class="brush:css">/* 0 0 auto */
flex: none;
/* Un valor, número sin unidades: flex-grow */
flex: 2;
/* Un valor, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;
/* Dos valores: flex-grow | flex-basis */
flex: 1 30px;
/* Dos valores: flex-grow | flex-shrink */
flex: 2 2;
/* Tres valores: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Valores globales */
flex: inherit;
flex: initial;
flex: unset;
</pre>
<h3 id="Values" name="Values">Valores</h3>
<dl>
<dt><code><'flex-grow'></code></dt>
<dd>
<p>Define el <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow">flex-grow</a> del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.</p>
</dd>
<dt><code><'flex-shrink'></code></dt>
<dd>Define el <code><a href="/en-US/docs/Web/CSS/flex-shrink">flex-shrink</a></code> del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.</dd>
<dt><code><'flex-basis'></code></dt>
<dd>Define el <a href="/en-US/docs/CSS/flex-basis" title="CSS/flex-basis"><code>flex-basis</code></a> del elemento flexible. Se acepta cualquier valor válido para las propiedades <code>width</code> y <code>height</code> . Un tamaño preferente de 0 debe tener una unidad para evitar ser interpretado como flexible. El valor predeterminado es 0% cuando se omite.</dd>
<dt><code>none</code></dt>
<dd>Esta palabra clave se computa a <code>0 0 auto</code>.</dd>
<dt>
<h3 id="Sintaxis_normal">Sintaxis normal</h3>
</dt>
</dl>
{{csssyntax}}
<h2 id="Ejemplo">Ejemplo</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>
<h3 id="Resultado">Resultado</h3>
<p>{{EmbedLiveSample('Example','100%','60')}}</p>
<h2 id="Specifications" name="Specifications">Especificaciones</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-property', 'flex')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
{{Compat("css.properties.flex")}}
<h2 id="See_also" name="See_also">Ver también</h2>
<ul>
<li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS/">Usar las cajas felxibles de CSS</a></li>
</ul>
|
