Have you ever encountered alignment challenges or want to get better at aligning content as a developer?
Those days of using floats, positioning, and complicated calculations to align content were truly frustrating.
But don't worry because Flexbox is here. This game-changing tool allows developers to effortlessly create complex and responsive web layouts.
In this article, we will explore the foundations of Flexbox, diving into its essential concepts and properties. Prepare yourself to revolutionize your web design skills with Flexbox!
What is Flexbox?
Flexbox also referred to as Flexible Box Layout, is an incredible CSS layout model that was introduced in CSS3. It empowers web designers to create flexible and responsive layouts for web pages. This layout model operates in a single direction, either vertically (from left to right) or horizontally (from top to bottom), making it a one-dimensional layout model.
One of the key benefits of Flexbox is its efficiency in arranging, aligning, and distributing elements within a container. By utilizing Flexbox, web interfaces can be built with ease, ensuring that they automatically adapt to different screen sizes and devices.
Concepts of Flexbox
When it comes to understanding and utilizing Flexbox, there are a few key concepts to keep in mind.
They are:
Flex Container
The Flex Container, also known as the parent container, is where the Flex items are housed. In other words, the Flex items are contained inside the Flex container, which can be considered as the parent. The Flex container can have one or more Flex items as the children.Flex Items
The Flex items, also known as the child or children, are the elements that are contained inside the Flex container. These Flex items can be arranged either horizontally (along the row axis) or vertically (along the column axis). By default, they are displayed in a single row.
Before transforming a container into a Flexbox, you need to set the display property to either flex
or inline-flex
, depending on your desired design. This allows the parent container to become a Flex container and enables the Flexbox functionality.
Example: Code illustrating the syntax for flexibility of flexbox
.flex-container
{
display: flex;
/_or you can set the value to inline_/
display: inline;
}
It's important to note that Flexbox operates on items that are directly inside a container. Therefore, it's crucial to properly structure your HTML markup to ensure the correct implementation of Flexbox.
Below are code illustrations describing Flex containers and Flex items.
Code html
<html>
<div class="flex-container">
<div class="flex-item box-1">Box 1</div>
<div class="flex-item box-2">Box 2</div>
<div class="flex-item box-3">Box 3</div>
</div>
</html>
code css
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.flex-container {
border: 8px solid purple;
display: flex;
background-color: black;
height: 300px;
}
.flex-item {
height: 100px;
width: 100px;
color: #2b0606;
font-size: 2rem;
margin: 4rem;
padding: 2rem;
text-align: center;
font-weight: bold;
}
.box-1 {
background-color: greenyellow;
}
.box-2 {
background-color: blueviolet;
}
.box-3 {
background-color: grey;
}
NB: You can style the CSS depending on how you want your output to look.
The border, background color, and other properties on the code source above are included for better illustration.
- The axes The axes consist of the main axis and the cross axis.
- Main axis The main axis is a horizontal line that extends from left to right. The starting point on this axis is referred to as the main start, while the ending point is known as the main end. The measurement of this axis is referred to as the main size.
The direction in which the main axis runs is determined by the property flex-direction
, which can be set to either a row or column.
- Cross axis The cross-axis is perpendicular to the main axis. The starting point on this axis is called the cross start, and the ending point is known as the cross end. The length of this axis is referred to as the cross size.
Image illustrating the main axis and the cross axis
Flexbox Properties
Flexbox properties are essential for governing the behavior of flex items within a flex container.
These properties can be divided into two groups:
Container Properties
Container properties include flex-direction, flex-wrap, flex-flow, justify-content, flex-grow, flex-shrink, and align-items.
These properties control how flex items are arranged and aligned within the flex container.Flex Item Properties
Flex item properties include order, flex, flex-grow, flex-shrink, and align-self.
These properties dictate the individual behavior of each flex item within the container, such as their order, flexibility, and alignment.
Let's explain container properties
1. Flex-Direction
Flex direction property determines the main axis and its direction, which in turn determines whether the flex items are positioned in a row or column inside the container.
The possible values for this property are:
-
flex direction-row
: By default, the main axis of Flexbox runs from left to right.
.flex-container {
flex-direction: row;
}
-
Flex direction column
: By setting the flex-direction property to the column, you can change the direction of the main axis to vertical.
.flex-container {
flex-direction: column;
}
Output
-
flex-direction row-reverse
: This property value reverses the order of the flex items in a row.
.flex-container{
flex-direction: row-reverse;
}
-
reverse column
This property value reverses the order of the flex items in a column.
.flex-container {
flex-direction: column-reverse;
}
Flex wrap
Flex containers can have multiple lines of items if space is limited.
The flex-wrap property controls whether the items should wrap onto new lines or stay on a single line. Its values include nowrap, wrap, or wrap-reverse.
-
flex-wrap: nowrap
This is the default value and ensures that the flex items stay on a single line, even if it causes overflow.
.flex-container {
flex-wrap: nowrap;
}
-
flex-wrap
: wrap By setting the flex-wrap property to wrap, the flex items are allowed to wrap onto new lines when necessary.
.flex-container {
flex-wrap: wrap;
}
-
flex-wrap: wrap-reverse
This property value wraps the flex items onto new lines but in reverse order.
.flex-container {
flex-wrap: wrap-reverse;
}
Flex Flow
Flex-flow is a combination of the flex-direction and flex-wrap properties, allowing you to specify both the main axis and the wrapping behavior in a single property.
flex-flow: column nowrap
Justify Content
The justify-content property controls how the flex items are spaced along the main axis of the flex container. It allows for spacing between items and redistribution of extra space.
Here are various values for the justify-content property:
-
flex start
This aligns the items at the start of the main axis.
.flex-container {
justify-content: flex-start;
}
-
flex end
This aligns the items at the end of the main axis.
.flex-container {
justify-content: flex-end;
}
-
Center
It centers the items along the main axis.
.flex-container {
justify-content: center;
}
You can also set the flex-direction to the column and play around justify content.
Example:
.flex-container {
flex-direction: column;
justify-content: center;
}
Space Between
This distributes the items evenly along the main axis
Code
.flex-container {
justify-content: space-between;
}
Output
-
Space around
Distribute the items evenly along the main axis
.flex-container {
justify-content: space-around;
}
Output
-
space evenly
Distribute the items evenly along the main axis, including space before the first item and after the last item.
Code
.flex-container {
justify-content: space-evenly;
}
Align-Items
The align-items property controls how the flex items are spaced along the cross-axis of the flex container.
Here are the different values for align-items:
-
flex-start
This aligns the items at the start of the cross-axis. This is the default value. Just like justify content.
.flex-container {
align-items: flex-start;
}
-
center value
Centers the items along the cross-axis.
.flex-container {
align-items: center;
}
Output
-
Baseline
Align the items such that their baselines are aligned.
.flex-container {
align-items: baseline;
}
Output
-
Stretch
Stretches the items to fit the height of the container. You can set the height property to notice the effect.
.flex-container {
display: flex;
height: 500px;
align-items: stretch;
}
-
End
Align the items at the end of the cross-axis.
.flex-container {
align-items: end;
}
Output
You can also play around with justify content and align items' property together.
Example
.flex-container {
justify-content: space-around;
align-items: flex-end;
}
Align Content
The align-content property is similar to align-items, but it applies to the container itself instead of the individual items. This can be useful if you want to align the container relative to the page or another container.
Note that you need to have a height set and enable wrapping for the property to work properly.
Let's demonstrate using align content with the value center, you can also apply other values as well.
.container {
flex-wrap: wrap;
align-content: center;
}
Output
Let's discuss the properties of flex items.
When applying flex item property you can either target the whole item or individual item depending on your preference.
-
Order
The order property controls and specifies the visual order in which flex items are displayed within a flex container.
It does not affect the order in the HTML markup.
By assigning different order values to flex items, you can rearrange their display order.
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.flex-container {
border: 4px solid purple;
display: flex;
background-color: black;
height: 200px;
}
.flex-item {
color: #2b0606;
font-size: 2rem;
padding: 2rem;
text-align: center;
font-weight: bold;
}
.box-1 {
background-color: greenyellow;
order: 1;
}
.box-2 {
background-color: blueviolet;
order: 1;
}
.box-3 {
background-color: grey;
}
.box-4 {
background-color: codetblue;
order: 1;
}
.box-5 {
background-color: chocolate;
}
.box-6 {
background-color: goldenrod;
}
The output when you set the order property to 1 on item 2
The output when you set the order property to 1 on items 2 and 4
Flex grow
The flex-grow property determines how much an item can grow or stretch to fill the available space in a flex container.
A value of 1 means the item can grow to fill the available space, while a value of 0 means it will not grow at all.
You can also use fractional values, like "0.5", which means the item will grow half as much as other items or you can set it to the value of your choice.
After applying flex-grow
Example 1:
.box-1 {
background-color: greenyellow;
}
.box-2 {
background-color: blueviolet;
flex-grow: 2;
}
.box-3 {
background-color: grey;
}
.box-4 {
background-color: codetblue;
}
.box-5 {
background-color: chocolate;
}
.box-6 {
background-color: goldenrod;
}
Example 2:
.box-1 {
background-color: greenyellow;
}
.box-2 {
background-color: blueviolet;
flex-grow: 1;
}
.box-3 {
background-color: grey;
flex-grow: 1;
}
.box-4 {
background-color: codetblue;
}
.box-5 {
background-color: chocolate;
}
.box-6 {
background-color: goldenrod;
}
Output
You can set it evenly by targeting the flex item
Example 3:
.flex-item {
color: #2b0606;
font-size: 2rem;
padding: 2rem;
text-align: center;
font-weight: bold;
}
.box-1 {
background-color: greenyellow;
order: 1;
}
.box-2 {
background-color: blueviolet;
}
.box-3 {
background-color: grey;
}
.box-4 {
background-color: codetblue;
}
.box-5 {
background-color: chocolate;
}
.box-6 {
background-color: goldenrod;
}
Flex shrink
This is the opposite of "flex-grow".
It determines how much an item can "shrink" to fit the available space.
A value of "1" means that the item can shrink to fit the space, so 1 is the default value.
A value of "0" means that it will not shrink at all. You can also use fractional values, like "0.5", to control the amount of shrinkage.
After applying the flex-shrink property, try resizing the browser to notice the effect.
If you don't want the items to shrink then apply the code below to the whole item
.flex-container {
display: flex;
}
.flex-item {
flex-shrink: 0;
}
Flex basis
The flex-basis property defines the initial size of a flex item before any remaining space is distributed. It can be specified in pixels (px), percentages (%), or with the value of "auto".
By default, flex items have a flex-basis of "auto", meaning their size is based on their content.
The output below is a flex-basis property with a value of 200px applied to the item on Box 2.
.flex-item {/*properties here*/}
.box-3 {
flex-basis:200px}
Align self
This property allows an individual flex item to override the alignment specified by the flex container's align-items property. It takes values such as flex-start, flex-end, center, baseline, or stretch.
.flex-item {
color: #2b0606;
font-size: 2rem;
padding: 2rem;
text-align: center;
font-weight: bold;
flex-grow: 1;
}
.box-1 {
background-color: greenyellow;
order: 1;
}
.box-2 {
background-color: blueviolet;
align-self: flex-start;
}
.box-3 {
background-color: grey;
}
.box-4 {
background-color: codetblue;
align-self: flex-end;
}
.box-5 {
background-color: chocolate;
}
.box-6 {
background-color: goldenrod;
align-self: flex-center;
}
Flex
The flex property is a shorthand property that combines the flex-grow, flex-shrink, and flex-basis properties in one declaration. It is commonly used to set the flex properties of flex items.
.flex-container {
display: flex;
}
.flex-item {
flex: 1 0 100px;
}
Using the shorthand declaration above is equivalent to the following individual declarations below:
.flex-item {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;
}
Conclusion
Understanding the basics of Flexbox is essential for creating modern, responsive web layouts.
By mastering the concepts of flex containers, flex items, the main and cross axes, and the various Flexbox properties, you will have the skills to design flexible and dynamic web UIs that adapt flawlessly to different devices and screen sizes.
So, embrace Flexbox and explore its vast possibilities for crafting stunning web interfaces.
Top comments (2)
Thank you for this article
You are welcome.
Glad you loved it.
ππ½