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
|
---
title: align-items
slug: Web/CSS/align-items
tags:
- Cajas Flexibles CSS
- Propiedad CSS
- Referencia
translation_of: Web/CSS/align-items
---
<p>La propiedad <a href="/es/docs/Web/CSS" title="CSS">CSS</a> <strong><code>align-items</code></strong> establece el valor {{cssxref("align-self")}} sobre todos los descendientes directos de un grupo. La propiedad align-self indica la alineación de un elemento dentro del bloque que lo contiene. En Flexbox controla la alineación de los elementos del {{glossary("Cross Axis")}}, en Grid Layout controla la alineación de los elementos en el eje Block dentro de su <a href="/en-US/docs/Glossary/Grid_Areas">área grid</a>.</p>
<p>El ejemplo interactivo a continuación demuestra algunos de los valores de <code>align-items</code> utilizando el sistema grid.</p>
<div>{{EmbedInteractiveExample("pages/css/align-items.html")}}</div>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="brush:css no-line-numbers notranslate">/* Palabras Clave Basicas */
align-items: normal;
align-items: stretch;
/* Alineamiento posicional */
/* align-items no considera los valores de "left" o "right" */
align-items: center; /* Agrupa los elementos alrededor del centro */
align-items: start; /* Agrupa los elementos desde el inicio */
align-items: end; /* Agrupa los elementos desde el final */
align-items: flex-start; /* Agrupa los elementos flex desde el incio */
align-items: flex-end; /* Agrupa los elementos flex desde el final */
align-items: self-start;
align-items: self-end;
/* Alineamiento de Linea Base */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Alineamiento de desborde (solamente para alineamiento posicional) */
align-items: safe center;
align-items: unsafe center;
/* Valores globales */
align-items: inherit;
align-items: initial;
align-items: unset;
</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code>normal</code></dt>
<dd>El efecto de esta palabra clave depende del modo de diseño utilizado:</dd>
</dl>
<ul>
<li>en diseños de absolutamente-posicionados, esta clave se comporta como <code>start</code> en cajas-absolutamente-posicionadas <em>reemplazadas</em>. y como <code>stretch</code> en <em>todas las demas </em>cajas-absolutamente-posicionadas.</li>
<li>En la posicion estatica de diseños absolutamenteposicionados, esta clave se comporta como <code>stretch</code>.</li>
<li>Para elementos flex, la clave se comporta como <code>stretch</code>.</li>
<li>Para elementos grid, Esta palabra clave conduce a un comportamiento similar al de <code>stretch</code>, excepto para cuadros con una relación de aspecto o un tamaño intrínseco donde se comporta como <code>start</code>.</li>
<li>La propiedad no se aplica a cajas de nivel de bloque ni a celdas de tabla.</li>
</ul>
<dl>
<dt></dt>
<dt><code>flex-start</code></dt>
<dd>El límite del margen transversal inicial del elemento flexible es unido al borde transversal final de la línea.</dd>
<dt><code>flex-end</code></dt>
<dd>El límite del margen transversal final del elemento flexible es unido al borde transversal final de la línea.</dd>
<dt><code>center</code></dt>
<dd>Los márgenes del elemento flexible son centrados dentro de la línea sobre su eje transversal. Si el tamaño transversal del elemento es mayor al del contenedor, se excederá por igual en ambas direcciones.</dd>
<dt><code>start</code></dt>
<dd>Los elementos se agrupan uno junto al otro hacia el borde inicial del contenedor de alineación en el eje apropiado.</dd>
<dt><code>end</code></dt>
<dd>Los elementos se agrupan uno junto al otro hacia el borde final del contenedor de alineación en el eje apropiado.</dd>
<dt><code>baseline</code></dt>
<dd>Todos los elementos flexibles son ajustados de modo que sus bases queden alineadas. El elemento con la distancia mayor entre su límite transversal inicial y su base es combinado con el borde transversal de la línea.</dd>
<dt><code>stretch</code></dt>
<dd>Las elementos flexibles son estirados de modo que el tamaño transversal de sus límites sea el mismo de la línea, manteniendo sus restricciones de anchura y altura.</dd>
<dt>
<h3 id="Sintaxis_formal">Sintaxis formal</h3>
</dt>
</dl>
{{csssyntax}}
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentarios</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>Definición inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}<sup>[1]</sup></td>
<td>{{CompatGeckoDesktop("20.0")}}<sup>[2]</sup></td>
<td>11.0<sup>[3]</sup></td>
<td>12.10</td>
<td>7.0{{property_prefix("-webkit")}} </td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Android Webview</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>4.4</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("20.0")}}<sup>[2]</sup></td>
<td>{{CompatNo}}</td>
<td>12.10</td>
<td>7.0{{property_prefix("-webkit")}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Las versiones anteriores de la especificación tratan a los hijos con posición absoluta como si fueran elementos flexibles de <code>0x0</code>. Las versiones posteriores los excluyen del flujo y establecen sus posiciones con base en las propiedades de alineación y justificación. Chrome implementa el comportamiento nuevo a partir de Chrome 52.</p>
<p>[2] Para activar soporte a flexbox en Firefox 18 y 19, el usuario debe acceder a <code>about:config</code> y cambiar el valor de la preferencia <code>layout.css.flexbox.enabled</code> a <code>true</code>. Los flexbox multiínea son soportados desde Firefox 28.</p>
<p>Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añadió soporte a la versión con prefijo <code>-webkit</code> de la propiedad, por razones de compatibilidad, usando la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es <code>true</code>.</p>
<p>[3] En Internet Explorer 10-11, si los elementos flex de una columna tienen <code>align-items: center;</code> y su contenido es muy largo, se saldrán de los límites del contenedor. Véase <a href="https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container">Flexbug #2</a> para más información.</p>
<h2 id="Véase_también">Véase también</h2>
<ul>
<li><a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS" title="CSS/Using_CSS_flexible_boxes">Usando las cajas flexibles CSS</a></li>
</ul>
|
