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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
|
---
title: justify-content
slug: Web/CSS/justify-content
translation_of: Web/CSS/justify-content
---
<div>{{CSSRef}}</div>
<h2 id="Resumen">Resumen</h2>
<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>justify-content</code></strong> define cómo el navegador distribuye el espacio entre y alrededor de los items flex, a lo largo del eje principal de su contenedor.</p>
<p>El alineamiento se produce luego de que las longitudes y márgenes automáticos son aplicados, lo que significa que, si existe al menos un elemento flexible con {{cssxref("flex-grow")}} diferente a 0, no tendrá efecto ya que no habrá espacio disponible.</p>
<div class="note">
<p>No se debe asumir que esta propiedad sólo se aplicará a contenedores flex en el futuro y por lo tanto no ocultarla simplemente estableciendo otro valor para {{cssxref("display")}}. El CSSWG está trabajano para <a href="http://dev.w3.org/csswg/css3-align/#justify-content">extender su uso a cualquier elemento en bloque</a>. La especificación preliminar se encuentra en una etapa muy temprana y aún no está implementada.</p>
</div>
<div>{{cssinfo}}</div>
<p>Véase <a href="/es/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> para más propiedades e información.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="brush:css">/* Alinear items flex desde el comienzo */
justify-content: flex-start;
/* Alinear items desde el final */
justify-content: flex-end;
/* Alinear items en el centro */
justify-content: center;
/* Distribuir items uniformemente
El primer item al inicio, el último al final */
justify-content: space-between;
/* Distribuir items uniformemente
Los items tienen el mismo espacio a su alrededor */
justify-content: space-around;
/* Valores globales */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code>flex-start</code></dt>
<dd>Los items flex se colocan comenzando desde el <strong>comienzo principal</strong>. El margen del primer item es alineado al ras con el borde del comienzo principal de la línea y cada item siguiente es alineado al ras con el precedente.</dd>
<dt><code>flex-end</code></dt>
<dd>Los items flex se colocan comenzando desde el <strong>final principal</strong>. El margen del último item es alineado al ras con el borde del final principal de la línea y cada item precedente es alineado al ras con el siguiente.</dd>
<dt><code>center</code></dt>
<dd>Los items flex son colocados hacia el centro de la línea. Los items flex se alinean al ras entre sí y en torno al centro de la línea. El espacio entre el borde del comienzo principal de la línea y el primer item es el mismo que el espacio entre el borde del final principal y el último item de la línea.</dd>
<dt><code>space-between</code></dt>
<dd>Los items flex se distribuyen uniformemente sobre la línea. El espaciamiento se hace de tal manera que el espacio adyacente entre dos items es el mismo. El borde del comienzo principal y el borde del final principal se alinean al ras con el borde del primer y último item respectivamente.</dd>
<dt><code>space-around</code></dt>
<dd>Los items flex se alinean uniformemente de tal manera que el espacio entre dos items adyacentes es el mismo. El espacio vacío anterior al primer item y posterior al último item equivale a la mitad del espacio entre dos items adyacentes.</dd>
</dl>
<h3 id="Sintaxis_formal">Sintaxis formal</h3>
{{csssyntax}}
<h2 id="Ejemplos">Ejemplos</h2>
<h3 id="Contenido_HTML"><strong>Contenido HTML</strong></h3>
<pre class="brush: html"><div id="container">
<p>justify-content: flex-start</p>
<div id="flex-start">
<div></div>
<div></div>
<div></div>
</div>
<p>justify-content: flex-end</p>
<div id="flex-end">
<div></div>
<div></div>
<div></div>
</div>
<p>justify-content: center</p>
<div id="center">
<div></div>
<div></div>
<div></div>
</div>
<p>justify-content: space-between</p>
<div id="space-between">
<div></div>
<div></div>
<div></div>
</div>
<p>justify-content: space-around</p>
<div id="space-around">
<div></div>
<div></div>
<div></div>
</div>
</div>
</pre>
<h3 id="CSS"><strong>CSS</strong></h3>
<pre class="brush: css">#container > div {
display: flex;
font-family: "Courier New", "Lucida Console", monospace;
}
#container > div > div {
width: 50px;
height: 50px;
background: linear-gradient(-45deg, #788cff, #b4c8ff);
}
#flex-start {
justify-content: flex-start;
}
#center {
justify-content: center;
}
#flex-end {
justify-content: flex-end;
}
#space-between {
justify-content: space-between;
}
#space-around {
justify-content: space-around;
}
</pre>
<p>Resultados en:</p>
<p>{{ EmbedLiveSample('Ejemplos', 600, 550) }}</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th>Especificación</th>
<th>Estado</th>
<th>Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Flexbox', '#justify-content', 'justify-content')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>Definición inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soprte básico</td>
<td>{{CompatGeckoDesktop("18.0")}} (behind a pref) [1]<br>
{{CompatGeckoDesktop("20.0")}}</td>
<td>21.0{{property_prefix("-webkit")}}</td>
<td>11</td>
<td>12.10</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soprte básico</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>12.10</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Firefox soporta sólo single-line flexbox hasta Firefox 28. Para activar soporte flexbox, para Firefox 18 y 19, el usuario debe cambiar la preferencia about:config "layout.css.flexbox.enabled" a <code>true</code>.</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li><a href="/es/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
</ul>
|
