mozilla

Comparar revisiones

Usando las cajas flexibles CSS

Change Revisions

Revisión 501319:

Revisión 501319 de StripTM el

Revisión 501321:

Revisión 501321 de StripTM el

Título:
Usando las cajas flexibles CSS
Usando las cajas flexibles CSS
Enlace amigable (slug):
Web/Guide/CSS/Cajas_flexibles
Web/Guide/CSS/Cajas_flexibles
Contenido:

Revisión 501319
Revisión 501321
n46          Cada hijo de un contenedor flex se convierte en un elemn46          Cada hijo de un contenedor flex se convierte en un elem
>ento flexible. Si hay texto directamente incluido en el contenedo>ento flexible. Si hay texto directamente incluido en el contenedo
>r flexible, se envuelve automáticamente en un elmento flexible an>r flexible, se envuelve automáticamente en un elemento flexible a
>ónimo.>nónimo.
n144      Las propiedades de alineación de "cajas flexibles" realizann144      Las propiedades de alineación de "cajas flexibles" realizan
> un "verdadero" centrado en CSS. Esto significa que los elementos> un "verdadero" centrado en CSS. Esto significa que los elementos
> flexibles permanecerán centrados, incluso si estos rebasan su co> flexibles permanecerán centrados, incluso si estos rebasan su co
>ntenedor flexible. Esto puede llegar a ser un problema, ya que si>ntenedor flexible. Esto puede llegar a ser un problema, ya que si
> sobrepasan el tope superior de la página o el izquierdo (en escr> sobrepasan el tope superior de la página o el izquierdo (en escr
>itura LTR de izquierda-a-derecha) o el derecho (en escritura RTL >itura LTR de izquierda-a-derecha) o el derecho (en escritura RTL 
>de derecha-a-izquierda), no se puede desplazar hacia ese área, in>de derecha-a-izquierda), no se puede desplazar hacia ese área, in
>cluso habiendo contenido allí. En el futuro, las propiedades de a>cluso habiendo contenido allí. En el futuro, las propiedades de a
>lineación se ampliarán para que tengan una opción "safe" (seguro)>lineación se ampliarán para que tengan una opción "safe" (seguro)
> para controlar esta situación. De momento, si esto te preocupa, > para controlar esta situación. De momento, si esto te preocupa, 
>puedes usasr los márgenes para conseguir el centrado, ya que esto>puedes usar los márgenes para conseguir el centrado, ya que estos
>s responderán de modo seguro parando el centrado si se sobrepasan> responderán de modo seguro parando el centrado si se sobrepasan 
> los límites. En vez de usar las propiedades&nbsp;<code>align-</c>los límites. En vez de usar las propiedades&nbsp;<code>align-</co
>ode>, simplemente pon márgenes automáticos en los elementos flexi>de>, simplemente pon márgenes automáticos en los elementos flexib
>bles que quieras centrar. En vez de usar las propiedades&nbsp;<co>les que quieras centrar. En vez de usar las propiedades&nbsp;<cod
>de>justify-</code>, pon márgenes automáticos en los límites exter>e>justify-</code>, pon márgenes automáticos en los límites exteri
>iores del primer y último elemento flexible del contenedor flexib>ores del primer y último elemento flexible del contenedor flexibl
>le. Los márgenes automáticos se adaptarán asumiendo el espacio so>e. Los márgenes automáticos se adaptarán asumiendo el espacio sob
>brante, centrando los elementos flexibles donde sobre espacio, y >rante, centrando los elementos flexibles donde sobre espacio, y c
>cambiando a alineación normal donde no sobre espacio. Sin embargo>ambiando a alineación normal donde no sobre espacio. Sin embargo,
>, si tratas de reemplazar&nbsp;<code>justify-content</code> con "> si tratas de reemplazar&nbsp;<code>justify-content</code> con "c
>centrado-basado-en-márgenes" en una "caja flexible" multi-línea, >entrado-basado-en-márgenes" en una "caja flexible" multi-línea, p
>probablemente no funcionará, ya que tendrías que poner márgenes e>robablemente no funcionará, ya que tendrías que poner márgenes en
>n el primer y último elemento de cada línea. A menos que puedas p> el primer y último elemento de cada línea. A menos que puedas pr
>redecir qué elementos encajarán en cada línea, no tendrás una res>edecir qué elementos encajarán en cada línea, no tendrás una resp
>puesta fiable usando el "<span style="line-height: inherit;">cent>uesta fiable usando el "<span style="line-height: inherit;">centr
>rado-basado-en-márgenes</span><span style="line-height: inherit;">ado-basado-en-márgenes</span><span style="line-height: inherit;">
>>" en el eje principal al reemplazar la propiedad&nbsp;</span><co>" en el eje principal al reemplazar la propiedad&nbsp;</span><cod
>de style="font-size: 14px; line-height: inherit;">justify-content>e style="font-size: 14px; line-height: inherit;">justify-content<
></code><span style="line-height: inherit;">.</span>>/code><span style="line-height: inherit;">.</span>
t150      Propiedades de las "cajs flexibles"t150      Propiedades de las "cajas flexibles"

Volver al historial