The human eyes have always searched and wondered in balance. The case isn’t different for users surfing the web, nor is it different for designers and developers coding the web. Today we are going to take a journey, one that would have us understand with a lot of practice on how to properly layout and balance our web pages. This is going to be in 3 part series with unique projects to build across each part.
The Old Way
When styling a page, good knowledge of positioning, float, margin, and padding is key to delivering a good result.
Say you want to style a header, you’d have a div or any other semantic tag of your choice, and inside of this, you’d have the logo, ul with it’s nested li tags and some options on styling them. Thus you could end up with something like this…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS Flexbox (Part 1): It's All in the Box</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="body">
<header>
<div class="logo">Flexible</div>
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Pay</li>
<li>Docs</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
Now let’s add required CSS the old way to make it look like our intended header.
/* Reset the client behavior */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-color: steelblue;
padding: 1.5em; /* Give some spacing */
}
nav {
float: right; /* Shifts it to the far end right-wards */
margin-top: -28px;
}
ul {
width: 100%; /* Spans the width of the parent container */
}
li {
display: inline-block; /* Makes them display in row form */
padding: 0.5em 1.2em;
color: #afd0ec;
}
.logo {
color: #112332;
font-weight: 600;
letter-spacing: 2px;
font-size: 1.2em;
font-family: "Courier New", Courier, monospace;
}
The code looks simple, but as a beginner, you find yourself mostly confused trying to understand some under-hood working of this method of styling. As such it takes a whole lot of time, calculations and attention to get a full page laid out and properly aligned, especially when trying center or align elements.
Well as much as I enjoy hacking, easy methods always have the win. We could have a simpler style with the Flex-box Model.
What Is a Flex-box
As of October 2017, a W3C Candidate Recommendation for the Flex-box Layout aimed at providing a more efficient way to lay out, align and distribute space among items in a container, even when their value is unknown or dynamic was made.
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.
Most importantly, the Flex-box Layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
Note: Flex-box Layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
Thus you could say that the Flex-box Model is a flexible box model for laying out contents on the web page.
I have provided links to more information on flex-box below, find this here. We are going to get our hands coding with basic examples.
In the next part of the tutorial, we are going to build Twitter’s dashboard. Which looks something like this:
Summary
What have you learned? Share in the comment section, I’d love to hear from you, your views and much more.
In this series, we covered the old way of styling, this is not an absolute cover. It’s merely a starter and allows us to see the bottle-necks around this model of styling.
Next, we took a quick introduction into the Flex-box Model, why it was introduced and what problems it looks to solve. In the links provided below, you’ll find more detailed information about the Flex-box Model.
In our next article, we will get busy with building our twitter landing page.
Resources
- CSS-Tricks – A Complete Guide to Flex-box
- Scotch.io – A Visual Guide to CSS3 Flex-box Properties
- MDN – Basic concepts of Flex-box
