Flexible Box Layout or often known as FlexBox, is a CSS layout model that allows us to organize our website in a simple yet effective way. Before this layout was introduced to CSS, there were four other layout modes, that includes:
- Inline: To organize texts in our webpage
- Table: To organize in a 2D-grid based system
- Block: To organize grouped or sections of our webpage
- Positioned: To specify exact position for items.
These four layout modes required lots of code to do some simple tasks like “Centering a div”. This is where FlexBox comes in clutch! This not only made coding easier, but also opened CSS Webpage-organization to a whole new level.
There are two things we need to understand in order to use FlexBox.
- Flex Container: This container will contain some items from our webpage. This container will also define the organization property of the items combined.
- Flex Item: These can be individual components in our webpage (anywhere from a div, to a nested div).
Before we learn about flex containers, lets talk about flex items. These are any component that is nested or "contained" in our flex container.
<div class="flex-container">
<div><1/div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
In the above pictures, we have four items in our flex-container. These items will appear in the same order we add them in. It is sufficient to know this much about flex items for now. Let us now learn how we can create a Flex Container. We can do so by using "Display: Flex" property. This simply makes our container Flex 💪🏻.
.flex-container{
display: flex;
}
There are lots of other properties that we can play around with in our container such as:
- flex-direction
- flex-wrap
- justify-content
- align-items
These properties can be used to change how we want to oprganize our items (vertically or horizontally), whether we want to center our whole container, whether we want to center our items, how do we want to space the items, etc. The following image shows how we can play around with the flex propoerties to do various tasks:
To learn more about these properties, W3Schoole and BitDegree are great resources!
One of the most commonly used property is "flex-direction". This property allows us to change the default axis from horizontal to vertical. We can see an example of this below:
.flex-container{
display: flex;
flex-direction: column;
}
This changes our primary axis and secondary axis, which will impact two other properties "justify-content" for organizing based on the primary axis and "align-items" based on the secondary axis. These two axis are also swapped when we use "flex-direction: column". Here is an example:
.flex-container{
display: flex;
justify-content: center;
}
.flex-container{
display: flex;
align-items: center;
}
The above image shows the difference between "justify-content: center" and "align-items: center" for the default row flex direction (also known as horizontally aligned). We can combine these two property to center something in the middle of the screen. Here is how we can do that:
.flex-container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
One last nice property we can use is "flex-wrap". This property will make sure as our window size shrinks (based on our primary axis), it will move around the flex items to fit inside the container. It will make sure the items are not onverflowing outside the screen. Here is how we can use it:
.flex-container{
display: flex;
flex-wrap: wrap;
}
These are just the surface level information for using flexbox in CSS. There is so much more we can do with it by combining various properties together. If you are curious to learn more about them, feel free to check our the additional resources. I hope this was both educational and fun for you to learn about but remember, don't forget to 💪🏻😎.