CSS 3: Flexbox

Let’s start by downloading this zip:

FlexboxDemo.zip

What is it?

It stands for ‘Flexible Box’
It’s basically a display type that comes with a range of properties allowing you to arrange items easily.
It is an alternative to use display, float, and other layout properties, but it allows to be more flexible and to build responsive sites.

Let’s look at flexbox components:

A flexbox element is split into two main parts: the container, and the items.
The container is the parent element in which the display is active. This is usually in the form of a div.
Flex items are child elements of the container, and make up the contents of the box.

Untitled

Create a flex container

Let’s write the code to start playing with it.

<!DOCTYPE html>
<html>
	<head>
	<style>
		.container {
			background-color: blue;
			margin: 10px;
		}
	
		.container-item {
			background-color: yellow;
			color: blue;
			text-align: center;
			margin: 10px;
			width: 70px;
		}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="container-item">A</div>
			<div class="container-item">B</div>
			<div class="container-item">C</div>
			<div class="container-item">D</div>
			<div class="container-item">E</div>
		</div>
	</body>

</html>

Now let’s give to our container the property display:flex;. See what changes.