html - container - flexbox grid
Flexbox: centro horizontal y verticalmente. (10)
Cómo centrar div horizontalmente y verticalmente dentro del contenedor usando flexbox. En el siguiente ejemplo, quiero que cada número esté uno debajo del otro (en filas), que están centrados horizontalmente.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
Cómo centrar los elementos vertical y horizontalmente en Flexbox
A continuación se presentan dos soluciones de centrado general.
Uno para elementos flexibles alineados verticalmente ( flex-direction: column ) y otro para elementos flexibles alineados horizontalmente ( flex-direction: row ).
En ambos casos, la altura de los divs centrados puede ser variable, indefinida, desconocida, lo que sea. La altura de los divs centrados no importa.
Aquí está el HTML para ambos:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
CSS (excluyendo estilos decorativos)
Cuando los elementos flexibles se apilan verticalmente:
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
Cuando los elementos flexibles se apilan horizontalmente:
Ajuste la regla de flex-direction del código anterior.
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
Centrando el contenido de los ítems flex.
El alcance de un contexto de formato flexible está limitado a una relación padre-hijo. Los descendientes de un contenedor flexible más allá de los niños no participan en el diseño de flexión e ignorarán las propiedades de flexión. Esencialmente, las propiedades de flexión no son heredables más allá de los hijos.
Por lo tanto, siempre deberá aplicar display: flex o display: inline-flex a un elemento padre para poder aplicar las propiedades de flexión al niño.
Para centrar vertical u horizontalmente el texto u otro contenido contenido en un elemento flexible, convierta el elemento en un contenedor flexible (anidado) y repita las reglas de centrado.
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
Más detalles aquí: ¿Cómo alinear verticalmente el texto dentro de un flexbox?
Alternativamente, puede aplicar margin: auto al elemento de contenido del elemento flexible.
p { margin: auto; }
Obtenga información sobre los márgenes auto flexibles aquí: Métodos para alinear elementos flexibles (vea el recuadro # 56).
Centrado en múltiples líneas de elementos flexibles.
Cuando un contenedor flexible tiene varias líneas (debido al ajuste), la propiedad align-content será necesaria para la alineación del eje transversal.
De la especificación:
8.4. Empaquetando líneas flexibles: la propiedad
align-contentLa propiedad
align-contentalinea las líneas de un contenedor flexible dentro del contenedor flex cuando hay espacio extra en el eje transversal, de manera similar a comojustify-contentalinea elementos individuales dentro del eje principal. Tenga en cuenta que esta propiedad no tiene efecto en un contenedor flexible de una sola línea.
Más detalles aquí: ¿Cómo funciona flex-wrap con align-self, align-items y align-content?
Soporte del navegador
Flexbox es compatible con todos los navegadores principales, excepto IE <10 . Algunas versiones recientes del navegador, como Safari 8 y IE10, requieren prefijos de proveedores . Para una manera rápida de agregar prefijos use Autoprefixer . Más detalles en esta respuesta .
Solución de centrado para navegadores antiguos.
Para obtener una solución de centrado alternativa utilizando la tabla CSS y las propiedades de posicionamiento, vea esta respuesta: https://.com/a/31977476/3597276
Si necesitas centrar un texto en un enlace, esto hará el truco:
div {
display: flex;
width: 200px;
height: 80px;
background-color: yellow;
}
a {
display: flex;
align-items: center;
justify-content: center;
text-align: center; /* only important for multiple lines */
padding: 0 20px;
background-color: silver;
border: 2px solid blue;
}
<div>
<a href="#">text</a>
<a href="#">text with two lines</a>
</div>
1 - Establecer CSS en div padre para display: flex;
2 - Establecer CSS en div padre a flex-direction: column;
Tenga en cuenta que esto hará que todo el contenido dentro de esa división se coloque arriba a abajo. Esto funcionará mejor si el div padre solo contiene el hijo y nada más.
3 - Establecer CSS en div padre para justify-content: center;
Aquí hay un ejemplo de cómo se verá el CSS:
.parentDivClass {
display: flex;
flex-direction: column;
justify-content: center;
}
Añadir
.container {
display: flex;
justify-content: center;
align-items: center;
}
al elemento contenedor de lo que quieras centrar. Documentación: justify-content y align-items .
Creo que quieres algo como lo siguiente.
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
border: 1px solid blue;
}
.flex-item {
background-color: tomato;
padding: 5px;
width: 20px;
height: 20px;
margin: 10px;
line-height: 20px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
Vea la demostración en: http://jsfiddle.net/audetwebdesign/tFscL/
Sus elementos .flex-item deben ser de nivel de bloque ( div lugar de span ) si desea que la altura y el relleno superior / inferior funcionen correctamente.
Además, en .row , establezca el ancho en auto lugar de 100% .
Sus propiedades .flex-container están bien.
Si desea que el .row se centre verticalmente en el puerto de vista, asigne 100% de altura a html y al body , y también a cero los márgenes del body .
Tenga en cuenta que .flex-container necesita una altura para ver el efecto de alineación vertical; de lo contrario, el contenedor calcula la altura mínima necesaria para encerrar el contenido, que es menor que la altura del puerto de visualización en este ejemplo.
Nota:
Las propiedades de flex-flow , flex-direction , flex-wrap podrían haber hecho este diseño más fácil de implementar. Creo que el contenedor .row no es necesario a menos que desee agregar algo de estilo alrededor de los elementos (imagen de fondo, bordes, etc.).
Un recurso útil es: http://demo.agektmr.com/flexbox/
No te olvides de usar atributos específicos de los navegadores importantes:
alinear-artículos: centro; ->
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justificar-contenido: centro; ->
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
Puede leer estos dos enlaces para comprender mejor flex: http://css-tricks.com/almanac/properties/j/justify-content/ y http://ptb2.me/flexbox/
Buena suerte.
diplay: flex; por su contenedor y margin:auto; porque su artículo funciona perfecto.
NOTA: Tienes que configurar el width y la height para ver el efecto.
<div class="EXTENDER">
<div class="PADDER-CENTER">
<div contentEditable="true">Edit this text...</div>
</div>
</div>
<div id="container"> <div class="item">CENTER</div> </div>
margin: auto funciona perfecto con flexbox. Se centraliza verticalmente y horizontalmente.
html, body {
height: 100%;
max-height: 100%;
}
.flex-container {
display: flex;
height: 100%;
background-color: green;
}
.container {
display: flex;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS</title>
</head>
<body>
<div class="flex-container">
<div class="container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
</div>
</body>
</html>
displa: flex;
align-tems: center;
justify-content: center;