Today, there are many design layout method that can help you do many things, but among those methods there is a method that is worth it to try for, named Flexbox, or the Flexible Box Layout. It is a powerful CSS layout module that gives web designers and developers an efficient and simple way to place, align and distribute elements in a container.
Flexbox Basics
Basically, Flexbox is formed by two elements, a flex container (flex parent) and flex items (flex children). A flex container is a containing element (like a div) given the display property flex. Flex items are child elements of a flex container, which can be manipulated through various display properties.
Flex containers and flex items each have their own range of properties that can be combined in different ways to create a range of complex layouts. Items inside a flex container can be laid out horizontally or vertically, aligned and distributed in various ways, and stretched or shrunk to fit the available space. All these options let you easily create responsive layouts.
How to use Flexbox
In order to start using flexbox, you need to first create your flex container (the parent element that will contain your flex items), for example a div block. Let’s add three more div blocks inside our flex container to act as the flex items before we style the element. The items will be stacked at this point.
We can set the parent container’s display property to flex with our child divs in place.
{
display: flex;
}
Layout Directions
The direction your elements will distribute themselves is known as the layout direction. Row acts as the default direction of a flex container, which will display the child elements horizontally. You can switch the layout to vertical by setting the direction to column.
Flex Container {
display: flex;
flex-direction: row;
}
Flex Container {
display: flex;
flex-direction: column;
}
The ‘main’ direction you set on your flex container is referred to whichever direction, while the ‘cross’ direction refers to other direction you didn’t choose. Due to this, the main direction will be horizontal and the cross direction will be vertical.
Flexbox also lets you reverse the layout; Children of a flex container will be laid out right-to-left (if direction is row) or bottom-to-top (if direction is column).
Flex Container {
display: flex;
flex-direction: row-reverse;
}
Flex Container {
display: flex;
flex-direction: column-reverse;
}
This can come in handy, especially if you wish to reserve the layout on smaller screens. For instance, you want to show text on the left side of the screen and an image on the right on desktop screens. This will move the image below the text on mobile. But, you can ensure that the image appears above the text by reversing the direction.
Flex Sizing
Flex users can modify their width or height (depending on the container’s layout direction) to fill available space.
Three options are given by Webflow for flex sizing: shrink if needed, fill empty space, and don’t shrink. Note that each child element can have its own settings, which allows for a plethora of design options.
Flex Item {
flex-shrink: <number>;
flex-grow: <number>;
flex-basis: <length> | auto;
}
Let’s take a look at what each of these options does:
- Shrink if needed: sizes the item based on its width/height or its content since the item won’t grow larger than it needs to but may shrink to its minimum size to prevent overflow.
- Fill empty space: ensure the item to fill all available space inside its parent. But, if you set this on all items in a flex container, they’ll expand to take up equal amounts of empty space.
- Don’t shrink: sizes the item based on its width/height or its content, but doesn’t allow it to shrink, even if that will cause overflow.
Flex items can also have their own alignment settings, which override the default alignment set by their parent flex container. These alignments behave as explained previously.
Flex Item {
display: flex;
flex-direction: row;
align-items: flex-start | flex-end | center | baseline | stretch;
}
Flex items display in the same order as they appear in the source code by default. You can ignore this behavior to ensure elements display with flexbox, in the same order as you want.
There are four main options that you can use:
- Auto: The default value, which order items as they are in the source
- First: Item appears first in its flex container
- Last: item appears last in its flex container
- Custom: you can customize the order your item will be displayed in
Custom order can be defined as a number. This number will define the order in which the flex item appears inside a flex container.
Flex Item {
order: <integer>;
}