Mastering Responsive Web Design for Seamless User Experiences: CSS Flexbox (Part A)
Create fully responsive web layouts using the CSS Flexbox layout system
Welcome to our second in the series on “Mastering Responsive Web Design for Seamless User Experiences." For this module, we will begin with the layout systems, starting with Flexbox. In this guide, you will learn the fundamental principles of Flexbox, a powerful layout model that simplifies web design.
We will explore how to structure and align elements, ensuring your web pages adapt seamlessly to various screen sizes. Whether a beginner or an experienced developer, this resource will empower you to craft dynamic and responsive web layouts. Let's dive in and enhance your web design skills with Flexbox.
Prerequisites
Before starting this, you must have a basic and solid familiarity with HTML.
Must be familiar with the fundamentals of CSS.
Must understand the CSS box model, how it works, and its application.
A code editor (VS Code recommended).
A web browser (preferably Google Chrome or Mozilla Firefox).
Introduction to CSS layout
CSS layouts are essential in web development, as they organize web page structures for various screen sizes. This documentation focuses on a specific layout system. CSS layout is well explained on the MDN Web Docs.
CSS layout systems
Normal flow: Normal flow is the default way a web page renders HTML code when only HTML controls the layout of the page. The default display property is block. Read more about the normal flow here.
Flexbox: This layout method helps to lay out contents in a 1-dimensional format along either a row or column. To achieve this, the display on the stylesheet must be set to flex (i.e. display: flex;). We will explore Flexbox later in this article, but visit this link to read the official documentation of Flexbox layout.
Grid: In contrast to the 1-dimensional layout of Flexbox, Grid is a 2-dimensional layout system for web pages. It displays content both in rows and columns together. The grid layout system accomplishes many other beautiful features. You can find more here.
Floats: This property aligns images with text by wrapping the text around the images either to the left or to the right, depending on the float direction you set it to. Read more here.
CSS Flexbox and its properties
CSS Flexbox, also known as Flexible Box Layout, is a smart way to organize and share space among contents inside a container, even if they change in size. It's perfect for making flexible and lively user interfaces, and it's a necessity for today's web development.
Flexbox makes it easier to handle layout challenges like aligning items, distributing spaces, and adapting to different screens and orientations. By mastering the concepts and properties of Flexbox, you can create responsive and appealing web layouts with ease.
Flex Containers
To use Flexbox, start by creating a flex container (often a div in HTML) that holds flex items. Below is an illustration of how to set a flex container using a div, and if you look in-depth, you will also notice the flex items nested into the container.
<div class="flexbox-container">
<div class="flexbox-item">Item-1</div>
<div class="flexbox-item">Item-2</div>
<div class="flexbox-item">Item-3</div>
<div class="flexbox-item">Item-4</div>
<div class="flexbox-item">Item-5</div>
<div class="flexbox-item">Item-6</div>
<div class="flexbox-item">Item-7</div>
<div class="flexbox-item">Item-8</div>
</div>
Below are flex properties that are directed to the Flexbox container:
1) Flexbox direction
Flexbox direction can be set to either row or column. Row is the default direction when flex-direction isn’t defined. Flex direction is set to the following:
row(default): the direction of items aligned from left to right, from the first to the lastrow-reverse: this is the opposite of a row, where alignment is from left to right but starting from the last to the first item.column: when aligned as columns, they arrange themselves from top to bottom, starting from the first to the last item.column-reverse: like row-reverse, this is the opposite of column. Here, the alignment of items is from top to bottom, starting from the last to the first item..flexbox-container{ display: flex; flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; }
The following images would help in the understanding of flex-direction.
Image source….CSS tricks
Notice the arrow direction, which indicates the direction in which the contents are aligned. 1= row, 2= row-reverse, 3= column, 4= column-reverse.
2) Flex-wrap property
The wrap property helps flex items wrap into many lines, as flex items by default will be on one line. This property would make them respond to screen sizing so that as the screen reduces, the items wrap into various lines, making them responsive.
Properties of flex-wrap include:
nowrap(default): this is the default wrap property, as flex items align themselves to only one line and will not be responsive to screen sizes.wrap: this property makes flex items wrapped into many lines from top to bottom.wrap-reverse: this is the opposite of the wrap property in direction, as it wraps flex items into many lines from bottom to top..flexbox-container{ display: flex; flex-wrap: wrap; flex-wrap: nowrap; flex-wrap: wrap-reverse; }
Refer to CSS tricks for more information and a visual demonstration.
3) Flex-flow property
The flex-flow property is a shorthand for defining both the flex-direction and flex-wrap properties as one. It can be any of the following:
From your knowledge of 1 and 2 above, you can easily decode what the combinations will do, take note that the default flex-flow property is row nowrap. Read more...
4) The gap property
The gap property is used to specify the amount of space between one flex item and the other within a flex container. Units can be in pixels (px). The row-gap and column-gap can also be set.
.flexbox-container{
display: flex;
gap: 20px;
}
5) Justify content
This property aligns content across the main axis of the screen. To understand this better, in flexbox and grid, you will often hear the terms main and cross axis. In real-life scenarios, you can refer to the main axis as the x-axis on a graph as it aligns items from left to right. Justify content has its properties, and I will explain them below.
flex-start (default): by default, we style every flex item as flex-start; this will align items towards the start of the flex-direction of choice. For demonstration purposes, the direction of choice chosen in our demonstration is row. Check out the alignment in the image below.
flex-end: This property sets the items toward the end of the chosen direction.
center: the center property aligns the items to the middle or center of the viewport regarding the chosen direction of flex.
space-between: space-between, as the name implies, creates equal spaces in between the items, leaving the item spanned across the direction of flex but little or no space around the items.
space-around: this property is almost the same as space between; it creates equal space between the items and equal space around them, but take note that the space between the items and the space around the items are not equal.
space-evenly: space evenly creates equal spaces around and in between the items. Unlike space-around, all spaces are equal in dimension visually.
Image source: CSS tricks. Visit MDN Docs for detailed charts on their compatibility with various web browsers.
6) Align items
The align-items property, unlike the justify-content property, aligns flex items across the cross-axis (y-axis in graphical illustrations) or vertical axis. The following are properties of align-items:
flex-start: Like
flex-startinjustify-content,flex-startinalign-itemspositions items at the beginning of the chosen direction.
Notice that the contents are all aligned at the beginning of the cross-axis from the top as opposed to the left when using justify-content. Take note that the flex-direction is set to row.
flex-end: flex-end in align-items sets the items to the end of the current line in the cross-axis concerning the flex-direction chosen.
center: the center property aligns the items to the middle or center of the cross-axis.
stretch (default): This property of stretch, stretches the items to fill out the cross-axis from top to bottom. It is also the default property of align-items.
baseline: this aligns the items such that their baseline aligns with each other.
7) Align content
Now we have heard about justify-content that aligns items across the main axis and the align-items that align items across the cross-axis. Note that these two properties take on only single line items, but now what is align-content? It aligns many flex lines across the cross-axis and only takes effect when the flex-wrap property is set to wrap or wrap-reverse.
Like align-items and justify-content above, align-content also has its properties which we will discuss below.
flex-start: this value displays the flex lines at the start of the container relative to the flex-direction set. For illustration, the flex-direction is set to row.
flex-end: this value displays the flex lines at the end of the container relative to the flex-direction chosen.
center: the center property aligns flex lines to the middle of the container.
stretch (default): the flex lines are being stretched to take up the remaining space. This is the default value when no align-content value is being set.
space-between: this value provides equal space between the flex lines.
space-around: space-around displays the flex lines with spaces before, between, and after them but the spaces are not equal.
space-evenly: this value distributes the flex lines with equal spaces before, between, and after.
Image source: Master Responsive Web Design CSS Grid, Flexbox & Animation
Conclusion
We have been able to cover the fundamentals of the CSS flexbox container in this article which is Part A in the flexbox module under this series, and thank you so much for reading thus far.
In our next article, we are going to be exploring Part B of this topic, which is the flex items (more like the children). Follow this link to read about it.
See you on the next one!