css - ¿Cómo usar el centro seguro con flexbox?
css3 (1)
Los elementos centrados de flexbox pueden tener un comportamiento no deseado cuando desbordan su contenedor .
Se han proporcionado varias soluciones no flexibles para este problema, pero
según MDN
hay un valor
safe
que se describe a continuación.
Si el tamaño del elemento desborda el contenedor de alineación, el elemento se alineará como si se iniciara el modo de alineación.
Se puede usar de la siguiente manera.
align-items: safe center;
Desafortunadamente, no he podido encontrar ningún ejemplo o discusión de esto, ni determinar cuánto soporte de navegador hay para ello.
He intentado usar la
safe
en este CodePen
.
Sin embargo, no funciona para mí.
Parece que se ignora la
safe
, o tal vez el elemento contenedor tiene un estilo incorrecto.
Realmente agradecería si alguien pudiera arrojar algo de luz sobre la
safe
y si se puede usar y cómo se puede usar para resolver el problema de desbordamiento, como lo demuestra el ejemplo de CodePen.
La palabra clave
safe
sigue siendo un
borrador funcional
, y aún no hay muchos navegadores (si los hay) que lo admitan, por lo que para obtener el mismo efecto, navegador cruzado, use
márgenes automáticos
por ahora, que deberían configurarse en el elemento flexible.
Tenga en cuenta que para compensar el margen superior / inferior de 50 píxeles del
modal
, use
padding
en
modal-container
.
.modal-container
{
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start; /* changed */
position: fixed;
width: 100vw;
height: 100vh;
overflow-y: scroll;
padding: 50px 0; /* added */
box-sizing: border-box; /* added */
}
.modal-container > #modal
{
display: flex;
flex-direction: column;
align-items: center;
margin: auto 0; /* changed */
padding: 12px;
width: 50%;
background-color: #333;
cursor: pointer;
}