El problema
Flexbox hace que el centrado sea muy fácil.
Simplemente aplicando align-items: centery justify-content: centeral contenedor flexible, sus elementos flexibles estarán centrados vertical y horizontalmente.
Sin embargo, hay un problema con este método cuando el elemento flexible es más grande que el contenedor flexible.
Como se señaló en la pregunta, cuando el elemento flexible desborda el contenedor, la parte superior se vuelve inaccesible.
Para el desbordamiento horizontal, la sección izquierda se vuelve inaccesible (o la sección derecha, en lenguajes RTL).
Aquí hay un ejemplo con un contenedor LTR que tiene justify-content: centery tres elementos flexibles:
Consulte la parte inferior de esta respuesta para obtener una explicación de este comportamiento.
Solución n. ° 1
Para solucionar este problema, use los márgenes automáticos de flexbox , en lugar de justify-content.
Con los automárgenes, un elemento flexible que se desborda puede centrarse vertical y horizontalmente sin perder el acceso a ninguna parte del mismo.
Entonces, en lugar de este código en el contenedor flexible:
#flex-container {
align-items: center;
justify-content: center;
}
Use este código en el elemento flexible:
.flex-item {
margin: auto;
}
Demo revisada
Solución # 2 (aún no implementada en la mayoría de los navegadores)
Agregue el safevalor a su regla de alineación de palabras clave, así:
justify-content: safe center
o
align-self: safe center
De la especificación del módulo de alineación de caja CSS :
4.4. Desbordamiento Orientación: el safey unsafepalabras clave y los límites de seguridad de desplazamiento
Cuando el [elemento flexible] es más grande que el [contenedor flexible], se desbordará. Algunos modos de alineación, si se cumplen en esta situación, pueden causar pérdida de datos: por ejemplo, si los contenidos de una barra lateral están centrados, cuando se desbordan, pueden enviar parte de sus cuadros más allá del borde inicial de la ventana gráfica, que no se puede desplazar a .
Para controlar esta situación, se puede especificar explícitamente un modo de alineación de desbordamiento . Unsafela alineación respeta el modo de alineación especificado en situaciones de desbordamiento, incluso si causa pérdida de datos, mientras que la safealineación cambia el modo de alineación en situaciones de desbordamiento en un intento de evitar la pérdida de datos.
El comportamiento predeterminado es contener el asunto de alineación dentro del área desplazable, aunque al momento de escribir esta característica de seguridad aún no está implementada.
safe
Si el tamaño del [elemento flexible] desborda el [contenedor flexible], el [elemento flexible] se alinea como si el modo de alineación fuera [ flex-start].
unsafe
Independientemente de los tamaños relativos de [elemento flexible] y [contenedor flexible], se respeta el valor de alineación dado.
Nota: El módulo de alineación de cajas se utiliza en varios modelos de diseño de cajas, no solo en flex. Entonces, en el extracto de especificaciones anterior, los términos entre paréntesis en realidad dicen "sujeto de alineación", "contenedor de alineación" y " start". Usé términos específicos de flex para mantener el foco en este problema en particular.
Explicación para la limitación de desplazamiento de MDN:
Consideraciones de artículos flexibles
Las propiedades de alineación de Flexbox hacen un centrado "verdadero", a diferencia de otros métodos de centrado en CSS. Esto significa que los elementos flexibles permanecerán centrados, incluso si desbordan el contenedor flexible.
Sin embargo, esto a veces puede ser problemático si se desbordan más allá del borde superior de la página o del borde izquierdo, ya que no puede desplazarse a esa área, ¡incluso si hay contenido allí!
En una versión futura, las propiedades de alineación se ampliarán para tener también una opción "segura".
Por ahora, si esto es una preocupación, puede utilizar márgenes para lograr el centrado, ya que responderán de una manera "segura" y dejarán de centrarse si se desbordan.
En lugar de usar las align-propiedades, simplemente ponga automárgenes en los elementos flexibles que desea centrar.
En lugar de las justify-propiedades, coloque márgenes automáticos en los bordes exteriores del primer y último elemento flexible en el contenedor flexible.
Los automárgenes se "flexionarán" y asumirán el espacio sobrante, centrando los elementos flexibles cuando haya espacio sobrante y cambiando a alineación normal cuando no lo sea.
Sin embargo, si está intentando reemplazar justify-contentcon un centrado basado en márgenes en una caja flexible de varias líneas, probablemente no tenga suerte, ya que necesita colocar los márgenes en el primer y último elemento flexible en cada línea. A menos que pueda predecir con anticipación qué elementos terminarán en qué línea, no puede utilizar de manera confiable el centrado basado en márgenes en el eje principal para reemplazar la justify-contentpropiedad.