The Basics of CSS Flexbox
CSS Flexbox is a concept that I came across when working with Bootstrap 4 in a few of my coding projects. While I gleaned some knowledge about flexbox in my initial encounters, I recently decided to delve deeper into the concept to understand how it worked.
Why use Flexbox?
Programmers use flexbox to align and position items along two perpendicular axes. Given that browsers will have different window sizes, the flexbox also allocates space to its items dynamically.
Creating a Flexbox Layout
To create a flexbox, you will need to create a parent container with child items in your HTML:
<body>
<nav class="container">
<div>Home</div>
<div>About</div>
<div>Contact</div>
</nav>
</body>Without the flexbox layout, the three child divs will, by default, be organized vertically in a column.
To add the CSS flexbox, you will add this line of styling to your stylesheet:
.container{
display: flex;
}This will create the following layout of items:
By default, flexbox property will order the items from left to right on a horizontal axis. The items are initially oriented to the left of the container, and you can see how the flexbox container extends to the far right of the window.
Axes
There are two possible axes for orientating your flexbox: the main axis and cross axis. The main axis refers to the “direction flex items are placed in the flex container” (css-tricks.com). The default main axis ranges horizontally from left to right. The cross axis is the axis perpendicular to the main axis. It is important to know these axes because different CSS properties will orient items along either the main axis or cross axis.
To change the orientation and/or direction of the items on the main axis, you can use the flex-direction property. For the .container selector in your css file, you can add these options:
flex-direction: row || row-reverse;Row-reverse will orient the items on a horizontal axis but order them from right to left:
To change the main axis to be vertical, you will change to flex-direction value to one of the following:
flex-direction: column || column-reverseThese values will create the following layout of items, respectively:
Justify-Content
As you can see with the ‘row’ flex-direction value, the items are still packed into either the left or right part of the container. When you add the justify-content property, the different values will change the spacing between items on the main axis. The examples are below:
While the justify-content property organizes items along the main axis, the align-items and align-content properties space items along the cross axis. More information about these properties can be found here : https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
Through my research, I grew a greater understanding of the CSS properties related to flexbox. I hope to apply my knowledge to create more custom CSS design features in my apps.