columnas descompensadas por arriba

quico5 · #1 (**permalink**) 26/12/2017, 13:20

No se porque la primera columna aparece más baja que las demás columnas

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
	<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
	<meta charset="UTF-8">
	<title></title>
	<style>
		body{font-family:'Noto Sans'; margin:;}
		.flex{display:flex}
		.column{flex-direction:column}
		figure{box-shadow:0 1px 2px grey;}
		figure>img{max-width:100%;}
		figure>figcaption{padding:1em;}
	</style>
</head>
<body>
	
	<main style="columns:300px 4; padding:0;">
		<figure class="flex column">
			<img src="https://i.blogs.es/6ea275/wwii/1024_682.jpg" alt="">
			<figcaption>Bienvenidos a la era del videojuego que ocupa 100 GB en disco</figcaption>
		</figure>
		<figure class="flex column">
			<img src="https://i.blogs.es/6ea275/wwii/1024_682.jpg" alt="">
			<figcaption>Bienvenidos a la era del videojuego que ocupa 100 GB en disco</figcaption>
		</figure>
	</main>

</body>
</html>

quico5 · #2 (**permalink**) 26/12/2017, 17:23

Parece ser que es por el formato columnas, las siguientes columnas no aplican margin-top

, supongo que es mejor usar un padding-top en el padre para apañarlo

Rafael · #3 (**permalink**) 27/12/2017, 13:16

Esa es una mejor opción. Yo casi no uso margin para nada.

Aparte de eso revisa esta guía para flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/