Flexbox Practice

Flexbox Practice

In this video you’ll see me practicing on CSS Flexbox while I’m on the go.

Let’s summarize

  1. CSS Flexbox is a powerful layout tool that allows you to easily create flexible and responsive layouts.
  2. It can be used to create complex layouts that would be difficult or impossible to create using the traditional methods of using floats, or using positioning.
  3. The reason why CSS Flexbox can be difficult is because it requires a good understanding of the concepts behind it. You must understand how the flexbox container works, how flex items respond to flex properties, and how to properly position and size them.
  4. Additionally, there is often a steep learning curve as you must learn how to use the various properties and values that are available to you.

Check out the code

HTML

<!DOCTYPE html>
<html lang="en" dir#"ltr">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=viewport-width, initial-scale=1.0" />
		<link rel="stylesheet" href="styles.css" type="text/css" />
		<title>Flexbox Practice</title>
	</head>
	<body>
		<header>
			<h1 class="center">Flexbox Practice</h1>
			<div class="css">
				<ul>
					<li>display: flex;</li>
					<li>flex-wrap: wrap;</li>
					<li>justify-content: center;</li>
					<li>align-items: flex-start;</li>
				</ul>
			</div>
		</header>
		<main>
			<div class="canvas">
				<div class="container">
					<div class="box 1">1</div>
					<div class="box 2">2</div>
					<div class="box 3">3</div>
					<div class="box 4">4</div>
					<div class="box 5">5</div>
				</div>
			</div>
		</main>
	</body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
}

:root {
	--container: #b8b728;
	--box: #0a3200;
}

html {
	font-size: 16px;
}

body {
	background-color: #000;
	color: #fff;
}

header {
	display: flex;
	flex-direction: column;
	padding: 1rem;
}

header h1 {
	font-size: 1.4rem;
	border-bottom: 0.5px solid #fff;
	padding-bottom: 10px;
}

.css {
	font-family: monospace;
	font-size: 0.8rem;
	text-align: center;
	padding: 10px 0;
}

.css ul {
	list-style: none;
}

.canvas {
	display: flex;
	justify-content: center;
}

.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-content: flex-start;
	gap: 10px;
	background-color: var(--container);
	width: 250px;
	height: 250px;
	padding: 10px;
}

.box {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--box);
	width: 60px;
	height: 60px;
}

.center {
	text-align: center;
}

#codingonthego #mobilecoding #asmrcoding #html  #css #flexbox