Buenos dias, mi duda es la siguiente, no termino de comprender el criterio que utiliza el navegador para separar por columnas, esto se debe a los titulos? En comparacion la primer columna tine mas items que la ultima por ejemplo y ocupan el mismo alto, solo que queda bien organizado, es decir, la columna de banco de datos no queda a debajo de los items de frameworks. Gracias y saludos!!
Hola Nahuel! No sé si responde a tu pregunta, pero para hacer el quiebre o salto de columnas, tuvimos que establecer un "alto = height", que en el caso de la clase fue de 250px. Se puede resolver tranquilamente aumentando el tamaño de "altura o height" las columnas y, en lugar de dejar los 250px podrías poner, por ejemplo, 252px. No sé si en otro video lo arregla o no, pero esa sería la opción más fácil y rápida que conozco (hasta el momento).
Hola Nahuel. Claro, yo tengo la misma duda. Te iba a responder que es porque lo pone en el padre nav y cada columna está agrupada, entonces el límite son 250px pero por cada grupo, pero no. Tanto los títulos como los ancora están libres dentro de la div. Yo tampoco entiendo, porque si el límite es 250px (que es lo que ocupa de altura la primera "lista"), la segunda tendría que involucrar también parte de la tercera.
Hola Nahuel y samanta, yo también me quedé con la misma duda. Ojala alguien nos guie en el tema.
Hola, ese método que utiliza el profe presenta sus fallos al agregar mas elementos lo que conlleva a que los elementos se posiciones por encima de la otra columna, lo mas conveniente es agregar cada columna en un div que los contengan t luego aplicar flex, es mucho mas facil y evita ese error.
Holaa, justamente ese problema lo solucione aumentando la altura de la columna, la cuestión esta en conocer el criterio que utiliza para realizar el salto de una columna a otra, si sacas los titulos se comporta como es de esperar, es decir, coloca los links uno debajo de otro hasta completar la altura y después se produce el quiebre hacia la columna contigua, ahora si le agregas los títulos, realiza el quiebre justo antes del título!!
Ya me fijé en el CSS por qué es . Fijense que la clase .navmap-list-title que corresponde a los títulos h4 tienen un margin: 0.9em 0 (18.72px porque el font-size: 1.3em * 0.9em = 1.17em * 16px por defecto = 18.72px), es decir un margen superior e inferior de 18.72px.
.navmap-list-title { font-weight: 700; font-size: 1.3em; margin: 0.9em 0.9em; padding-left: .3em; padding-top: .2em; padding-bottom: .2em; }
Entonces complementando la definición de height de 250px (yo le puse 260px porque el profesor no tuvo en cuenta la "Lógica de Programación") con el margen de 18.72px se puede lograr que los títulos queden en el límite superior de cada columna; porque es suficiente que cada columna tenga el espacio correspondiente para no sobrepasarse a la siguiente.
Otra cosa que considero útil aportar es que a nosotros las columnas nos quedan pegadas. Leí que una opción es definir un width en el .rodapePrincipal-navMap, pero también se podría considerar cambiar el margin: 0.9em 0 a margin 0.9em 0.9em del .navmap-list-title
Saludos y éxitos!
Igual, para mí, hay q agrupar en un div cada h4 con su y le asignaría un nombre de clase. Porque de ese modo ponemos align-content: space between en esa clase y listo.