path: root/files/es/web/css/box-pack/index.html

---
title: '-moz-box-pack'
slug: Web/CSS/box-pack
tags:
  - CSS
  - Diseño
  - No estándar(2)
  - Propiedad CSS
  - Referencia CSS
translation_of: Web/CSS/box-pack
original_slug: Web/CSS/-moz-box-pack
---
<div>{{CSSRef}}{{warning("Esta propiedad es parte del módulo estándar original para el diseño de las cajas CSS Flexible que fue sustituida por un nuevo estándar.")}}</div>

<p>Ver <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Flexbox</a> para más información.</p>

<h2 id="Resumen">Resumen</h2>

<p>Las propiedades  <a href="/en-US/docs/Web/CSS">CSS </a><code>-moz-box-pack</code> y <code>-webkit-box-pack</code> especifican cómo una <code>-moz-box</code> o un <code>-webkit-box</code> empaquetan o disponen  su contenido en la dirección de su diseño o esquema. El efecto de esto sólo es visible si hay expacio extra en la caja. Ver <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Flexible_box_properties">Flexbox</a> para más información sobre las propiedades de los elementos flexbox.</p>

<p>La dirección del esquema o diseño (layout)  depende de la orientación del elemento: vertical o horizontal.</p>

<p>{{cssinfo}}</p>

<h2 id="Síntaxis">Síntaxis</h2>

<pre class="brush:css">/* Valores de palabras clave */
-moz-box-pack: start;
-moz-box-pack: center;
-moz-box-pack: end;
-moz-box-pack: justify;

/* Valores gloables */
-moz-box-pack: inherit;
-moz-box-pack: initial;
-moz-box-pack: unset;
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>start</code></dt>
 <dd>La caja empaqueta o muestra el contenido al principio dejando el espacio libre que hubiera al final.</dd>
 <dt><code>center</code></dt>
 <dd>La caja empaqueta o muestra el contenido en el centro dejando el espacio libre que hubiera dividido de igual manera entre el inicio y el final.</dd>
 <dt><code>end</code></dt>
 <dd>La caja empaqueta o muestra el contenido al final dejando el espacio libre que hubiera al principio.</dd>
 <dt><code>justify</code></dt>
 <dd>El espacio se divide de igual manera entre los diferentes hijos sin dejar nada del espacio libre ni antes del primer hijo ni después del último. Si sólo hay un hijo el comportamiento es como si fuera <code>start</code>.</dd>
</dl>

<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>

{{csssyntax}}

<h2 id="Ejemplos">Ejemplos</h2>

<pre class="brush: css">div.example {
  border-style: solid;

  display: -moz-box; /* Mozilla */
  display: -webkit-box; /* WebKit */

  /* Hace esta caja más alta que los hijos para que haya hueco suficiente
     para el empaquetado en la caja */
  height: 300px;
  /* Hace la caja lo suficientemente ancha para mostrar los contenidos
     centrados horizontalmente */
  width: 300px;

  /* Los hijos deberían estar orientados verticalmente */
  -moz-box-orient: vertical; /* Mozilla */
  -webkit-box-orient: vertical; /* WebKit */

  /* Alínea los hijos con el centro horizontal de la caja */
  -moz-box-align: center; /* Mozilla */
  -webkit-box-align: center; /* WebKit */

  /* Dispone a los hijos en el fondo de la caja */
  -moz-box-pack: end;             /* Mozilla */
  -webkit-box-pack: end;          /* WebKit */
}

div.example p {
  /* hace los hijos más estrechos que el padra para que
     haya espacio suficiente para el box-align */
  width: 200px;
}
</pre>

<pre class="brush: html">&lt;div class="example"&gt;
  &lt;p&gt;Será el segundo empezando desde el fondo de div.example y centrado horizontalmente.&lt;/p&gt;
  &lt;p&gt;Estaré en el fondo de div.example y centrado horizontalmente.&lt;/p&gt;
&lt;/div&gt;
</pre>

<p>{{EmbedLiveSample('Examples', 310, 310)}}</p>

<h2 id="Notas">Notas</h2>

<p>EL borde  de la caja que será tomado como <em>start</em>  para el empqeutado dependerá de la orientación y dirección de la caja:</p>

<table class="standard-table" style="text-align: center;">
 <tbody>
  <tr>
   <th> </th>
   <th><strong>Normal</strong></th>
   <th><strong>Reverse</strong></th>
  </tr>
  <tr>
   <th style="text-align: right;"><strong>Horizontal</strong></th>
   <td>left</td>
   <td>right</td>
  </tr>
  <tr>
   <th style="text-align: right;"><strong>Vertical</strong></th>
   <td>top</td>
   <td>bottom</td>
  </tr>
 </tbody>
</table>

<p>El borde opuesto a start será el considerado como <em>end</em>.</p>

<p>Si el empaquetado se establece usando el atributo <code>pack</code> del elemento el estilo es ignorado.</p>

<h2 id="Especificaciones">Especificaciones</h2>

<p>Esta propiedad es no estándar aunque una propiedad similar apareción en <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">draft of CSS3 Flexbox</a>,  que a su vez ha sido sustituida para nuevas versiones de la especificación.</p>

<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos 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>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Ver_además">Ver además</h2>

<p>{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}</p>