Basic flexbox structure

less than 1 minute read

Flexbox! That thing, everyone talks about that but anyone actually knows how to handle it =P

Well, I’m not the most expert in flexbox, but I have some experience dealing with it. As usual, I’m not going to give a big explanation about this, but instead I’m leaving here a piece of code ready to use that is going to help you to start with flexbox, a basic structure as a basic working example. Copy & paste!!

<html lang="en">
<head>
	<title>Flexbox Testing</title>
	<style>
		body {
			margin: 0;
			height: 100vh;
			border: 1px solid;
		}

		.container {
			height: 50%;
			display: flex;
		}

		.item {
			border: 1px solid;
			flex-grow: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	</style>
</head>
<body>

<div class="container">
	<div class="item"><span>flex</span></div>
	<div class="item"><span>flex</span></div>
	<div class="item"><span>flex</span></div>
</div>
<div class="container">
	<div class="item"><span>flex</span></div>
	<div class="item"><span>flex</span></div>
	<div class="item"><span>flex</span></div>
</div>

</body>
</html>