Trucos con Flexbox (4) - Cuadrícula perfecta
Вставка
- Опубліковано 19 вер 2024
- En este video aprenderemos a crear una cuadricula (varias filas y columnas) con igual separación vertical y horizontal utilizando flexbox y completamente responsive.
Visítanos en nuestra página web escuela.digital
Síguenos en Facebook: escuela.digital...
Síguenos en Twitter: escuela.digital...
Únete a la comunidad Escuela Digital en Facebook:
escuela.digital...
Realmente tengo que agradecerte por la gran calidad de tu material. Es de lo mejor que hay en internet, y no sólo en idioma español.
/* Quitar -> justify-content: space-between; */
CONTAINER
padding: 1em;
@media screen and (min-width: 55em) {width: 50em;}
@media screen and (min-width: 80em) {width: 75em;}
@media screen and (min-width:105em){width:100em;}
ITEM
margin: 1em;
width calc((100% - 2em * 1) / 1)
@media screen and (min-width: 55em) {width: calc((100% - 2em * 2) / 2);}
@media screen and (min-width: 80em) {width: calc((100% - 2em * 3) / 3);}
@media screen and (min-width:105em){width: calc((100% - 2em * 4) / 4);}
subelo con un eje,plo a github
Muy bueno.
Aquí una forma sencilla con solo css usando column-count :
1
4
2
5
3
6
#container {
background-color: #aaa;
margin: 0 auto;
height: auto;
width: 500px;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
column-gap: 10px;
overflow-y: auto;
overflow-x: hidden;
}
.box {
background-color: white;
border: 1px solid black;
width: 100%;
margin: 10px ;
display: inline-block;
box-sizing: border-box;
}
codepen.io/karo0wk/pen/GRoqzMa
Gracias! me sirvió un montón
un genio Alvaro Felipe, gracias. Estoy viendo todos tus cursos
Realmente eres un genio al hacer el uso de calc para sacar los márgenes con medidas absolutas, pero ahora hacer cuadrículas con CSS Grid es tan fácil que este método ya queda obsoleto a menos que quieras lucirte. Igual se aprende bastante viendo tus videos espero tengas contenido de CSS Grid para seguir aprendiendo.
Amigo gracias por tus tutoriales, tengo una pregunta, que programa usas para editar los tutoriales, es que me interesa la forma en la que apareces en la ezquina inferior mientras se muestra el contenido de la pantalla.
Hola gracias de nuevo! quedo ++++ yo arregle la cuadricula de 5 de ancho así, los conjuntos de 12 son muy divisibles pero muchas veces pasara esto, deje los elementos en el centro, la media query la hice para pantallas muy grandes pero funciona con otros limites, hacia abajo las query también son entre limites para que no hereden.
@media screen and (max-width:2000px) and (min-width: 1749px){
.item{
width: calc((100% - 40px)/5);
}
.item:nth-child(11n){
margin-left: auto;
margin-right: 10px;
}
.item:nth-child(12n){
margin-right: auto;
}
}
Que plugin usas para recargar automáticamente el navegador?
Saludos, tengo entendido que para Responsive Web Design no es aconsejable usar medidas absolutas (como px), al menos para el width, sin embargo fue lo que hiciste aqui en el minuto 20 mas o menos para que se respetara la separacion vertical y horizontal con los margenes.
Tambien vi que ajustaste a px los margenes laterales pero esos no vi que se afectaron como paso con los margenes bottom. Me ayudas a comprender un poco por favor?
Me fue de gran ayuda, muchas gracias
Genial. Podrias hacer una serie de tutoriales, si da para ello sobre las propiedades Multi-Column.
column-count, column-gap, column-rule-width....
saludos y gracias
Hola estimado, como ordeno varios labels en un cuadrado? quiero ordenar 20 labels en un marco o cuadrado, algo parecido a una calculadora.
Muchas gracias por el tutorial!!!
Hola muy video te felicito, oye me quede esperando tu curso de drupal, lo vas a dictar?
Sos un crackkkkkkkkkkkkkkkkkkk
muchas gracias por su tutoriales, mui explicativos....
agrega downloads, archivos para el download....
Excelente tuto. Consulta: que plugin utilizas para que ambos navegadores se actualicen cada vez que guardas el script sass y el mismo compila?
Hola! Me gusta como explicas y los ejemplos, pero al ser esto de 4 años no hay ningún problema en aprenderme esto? Alomejor flexbox ha cambiado algo, puedes ayudarme
No, no hay problema, flexbox se usa como lo ves en el video hasta el día de hoy. Saludos.
igual podrias combinar last-child con nth-child() para aumentar el ancho del último
Yeah Nuevo video lo esperaba con ancias aun no lo veo y se que será lo mejor!
Gracias profe ;)
gracias muy bueno!
terrible !! muchas gracias !!
Bueno, ahora con CSS Grid se puede hacer incluso más fácil.
cómo haría para centrar una fila con dos columnas debajo de una fila con tres columnas que se vea ordenado?
esta bueno
en que casos utilizarias float y position?
julioma Eso es teoria y experiencia. No existe una regla. Cada uno sabrá que método aplica mejor para cada caso.
con este nuevo modelo de layout hay que olvidarnos de float y position absolute?
julioma no. Float y position cumplen perfectamente con su mision. Flexbox remplaza a float para crear grids y a position para las alineaciones verticales, nada más. Para otros casos, float y position siguen y seguirán siendo utilizados.
Creo q en la parte de el final hubiera sido correcto q metieras el nth-child en el media query si no? asi ya no le afectaba a los otros
Jjejeje soy novato pero se me ocurrio como alternativa
Quiero alinear con imágenes en horizontal como sería?
en css calc con media query no funciona?
Yo he logrado solucionar el problema del último item en el tamaño de 800px.
He añadido dentro del MQ de 800px lo siguiente:
@media (min-width: 800px) {
.item {
width: calc((100% - 40px) / 5);
}
.item:last-child {
margin-right: auto;
margin-left: 10px;
}
}
Soy muy principante, llevo casi 2 semanas estudiando y desconozco si fallará en algo o no se debería hacer así.
Gracias :D
Para la última fila del grid con flexbox una solución que se me ocurre es tener un contador de los elementos que hay, y en base a eso añadir clases css para cada uno de los casos previamente definidos.
Por ejemplo, en el caso de las cinco columnas sabemos que la última fila quedará descuadrada si (num_elem%5)>0, por lo tanto en el caso de que esta condición sea verdadera habrá que aplicar una clase personalizada como has hecho tú usando last-child y nth-child cuando (num_elem%5) sea igual a 1, 2, 3 o 4. Todo esto con javascript, claro está, no creo que se pueda hacer con CSS puro.
Que conste que no lo he programado (puedo estar equivocado), y que puede que esto incremente muchísimo el código a una cosa que está pensada para ser sencilla (flexbox), por lo que se puede dar el caso de que usar float sería una solución mas sencilla que la que describo.
Un saludo.
CuLCHy Tambien estaba pensando algo así, pero usar el resto de dividir el numero total entre el numero de items por fila para saber cuantos quedan al final. Pero es mucho codigo adicional y meter javascript, por eso recomendé dejarlo como está que tampoo es tan grave. Al final depende de los gustos de cada uno.
¿Con Flexbox ya no es necesario usar "media queries" ?
xavizende En este video uso las media queries.
Jajajá, eso me pasa por preguntar antes de terminar de ver el video. Me quedé con esa duda en los vídeos anteriores a este sobre Flexbox. Gracias por responder.
he copiado el codigo tal y cual y no me aparecen los espacioes entre las cajas y tampoco los numeros se centran al medio de cada caja, que puede estar fallando
codepen.io/prosteven/pen/ryXOMN?editors=0100, si puedes corrigeme el codigo y enlazame el resultado gracias
section.contenidoSeccion
{
width:600px;
height: 400px;
background-color: skyblue;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div.items
{
background-color: tomato;
flex:none;
width:100px;
height: 100px;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
estas usando sass en la parte del video donde trabajas los estilos pero en el código html llamas a la hoja de estilos que tiene extension .css eso va a generar un error en la sintaxis de css. ladriiiiiiii!
despues de dar tantas vueltas use grid
Siempre me pareció mucho más espantoso usar floats, clears y números pre-calculados que inline-block.
¿Qué pasa si luego quieres cambiar la cantidad de elementos por fila? Toca cambiar cuatrocientas líneas de código en vez de cambiar sólo el tamaño del elemento como harías en inline-block.
Usar inline-block en los elementos declarando "word-spacing:-1em" y "display:table" en el padre me parece un infinitamente más elegante. Luego para pasar de 4 a 5 elementos basta cambiar el ancho de 25% a 20%.
Incluso declarar el font size a 0 en el padre y luego de nuevo a lo que corresponde para evitar el problema del white space me parece mucho menos horroroso (iba a decir más elegante, pero no, sigue siendo horroroso). Como mucho toca usar REM en lugar de EM. O cambiar el font-familiy del padre a una fuente de ancho cero y de vuelta a la original en el hijo, para no joder el flujo de los em.
O incluso (espantooooo) cualquiera de las formas de eliminar el espacio en el HTML mismo, preferentemente mediante javascript así no se hace imposible de mantener. O mediante comentarios entre el tag de cierre de un elemento y el de inicio del siguiente. O diractamente pasando de los tags de cierre en aquellos elementos en que es válido en HTML5, como en los LI
O ningún hack en absoluto, que a fin de cuentas todo minificador borra los espacios en blanco, así que el problema de white space en los inline-block existe durante el desarrollo pero no en la implementación (que suele / debe estar minificada)
Sinceramente me sorprende ver que prefieres (o preferías, que siendo justos el video tiene dos años y medio) recurrir a floats y hacks tan específicos.
La solución por Flexbox la explicas muy bien en el video, pero sincerametne el problema del space between en la última fila hace que siga prefiriendo inline-block.
Sobre todo porque hacerlo mediante flexbox cuando no tienes una cantidad de elementos pre-definida (como pasa el 99% de las veces), calcular los hacks para el space-between es un dolor de cabeza. Esto es sin dudas lo peor de todo el flexbox, es sencillamente ridículo que trate de poner los ultimos elementos en el centro o en los extremos, en vez de tirarlos a la izquierda respetando la grilla que estaba formando hasta la línea anterior. Realmente no entiendo qué estaban pensando cuando aceptaron ese comportamiento en el estándar...
En fin, a mi gusto sigue siendo preferible inline-block, o mucho mejor aún, CSS grid (que por suerte, ya podemos decir que es suficientemente implementado como para usarlo)
"cuadricula perfecta" -> la ultima fila queda pesima jaja
¿Cómo es el sub1 o es sup1? Yo si no se :( soy chibolo xD
Jeancarlos Molina zoom: 1 IE6 renderizaba los layouts muy mal, haciendo que todo se desmaquete pues no reconocía muchos modelos de caja, segun el tipo de display o si estaba flotado, etc. Entonces habia que llenar la hoja de estilos com zoom: 1 para que IE6 aplique su propiedad hasLayout. Es una larga historia que comienza con la guerra entre Netscape y IE. Microsoft pensó que podría imponer su propia tecnología en la web así como lo hizo en el escritorio y por eso IE no respetaba ningun estandar y habia que hacer malabares para que las cosas funcionen. Ahora IE ya respeta los estándares pero su mala fama es más grande que sus méritos actuales.
Escuela Digital ahhh con razon no lo encontraba XD interesante lo del zoom: 1. GRACIAS! lo maximo como siempre, a ti te debo mucho.
Jeancarlos Molina Estamos para apoyarnos.