Part – 10 Flexbox in CSS
Hello all! So I have been busy this festive season as like all others in India. An amazing thing to see at this point of time in India is how different brands transform their websites into a resplendence of colours by inculcating major graphical changes.
Co-incidentally, we are also on a brink of a major change, i.e. we are finally stepping our learning of CSS into the big leagues.
Let’s us explore how major brands today build responsiveness to their big changes and explore our first expert feature of CSS, the Flexbox!
Flexbox
In the first topic of the expert track we will cover the following:
- The Flex-Container
- Main Axis vs. Cross Axis
- The Flex Items
To use a flexbox is quite a simple affair.
We can use Flexbox simply by using the display property and assigning it the value flex.
What it does is that it creates a parent flex container for the element.
Now since this element becomes a container, it needs to now contain elements.
These items are called the flex items.
Flex items are the children of the flex container element.
The flex container has certain properties, namely:
- Flex-flow
- Justify-content
- Align-content
- Align items
Similarly the flex items also contain certain properties such as:
- Order
- Flex
- Align self
Above is a simple representation of a flexbox.
Flex-direction is a property that specifies that how the elements will be organised within the flexbox.
If specified row, the flex items will behave like an inline-block, with each item occupying the minimal possible width (unless specified) and the maximum possible height of the block/flex-container.
If specified column, the flex items will behave like a simple block element, with each item appearing after the other.
Generally the row settings is chosen when we want the sizing done through the perspective of desktop, while column is chosen for a mobile first approach.
Main Axis vs. Cross Axis
So what did we do when we applied row or column to our main flexbox container?
We got something like the main axis and the cross axis.
When we applied the row setting, the main axis started from the top left and went to the top right in a horizontal fashion, while the cross axis wen to the bottom from the top.
This means that the elements will be displayed in a row from left to right.
When we use row-reverse the exact opposite happens as shown below.
Here the starting and ending point of the axis changes.
When we talk about the column settings, the main axis, i.e the axis along which elements are positioned, changes from horizontal to vertical as follows:
Whereas for column-reverse, it is again the opposite, which means the first element will be placed at the bottom now.
flex-flow
Flex-flow is a shorthand property for flex-direction and flex-wrap.
Since flex-direction is used so much with flex-wrap, it made sense to have a single property that did both the things.
E.g.
| flex-flow: row wrap |
align-items
Align-items as its name states aligns the items according to the provided value for the property.
As we know that the items may be placed horizontally or vertically depending on the value of flex-direction property, this may also change the position of our main axis or the cross axis.
Align-items works with our cross axis representation of elements. The align items property will align the items in accordance to the cross axis.
I.e if the flex items are displayed in a row, and center is used to align the items, the flex items will appear in the center along the vertical direction.
Also this is a parent container property
E.g.
| align-items: center |
This is how the items will be aligned in this case.
justify-Content
Justify-content will align items along the main axis. This is the major difference between align items and justify-content.
As the name states, justify content decides how the content is placed along the main axis. This also includes how the content is spaced, evenly or with some extra space in between.
A combination of justify-content and align-items can be used to center align items both along the x and the y axis, i.e the dead center of the page.
This is a good way of centering anything as the flexbox will maintain its sizing without giving up on any bleeding edges or non responsiveness.
This is also applied to the parent flexbox container.
E.g.
| align-items:center; justify-content:center; |
Following is the representation of aligning items in flexbox
align-content:
Align-content allows us to align the content along the cross axis. This comes to play when the parent container’s width changes or reduces, like viewing a web page in a mobile.
Align-content will then take up the place of align-items and will align the items in the web page.
Flexbox and the Z-index
In the position topic we learned that adding the z-index to an element only has an effect, if the position property with a value different from static was applied to this element.
One exception from this behaviour is flexbox: Applying the z-index to flex-items (so the elements inside of the flex-container) will change the order of these items even if no position property was applied.
order
Let’s for example say we want to change the order of the items displayed inside the flex container to have a user specified order rather than a normal or reverse one.
Suppose we have 4 items, item A, item B, item C and item D.
Now if displayed in a general fashion using flex row, we will have the items with the order of
A =0, B=0, C=0 and D=0. This is also the sequence on how the items will be displayed.
When we use the order property we are able to manipulate the rendering order of the items on the screen. This can be changed as per our preference.
The default value of order is 0.
If we change the order in a positive increment, such as A=1, the item A will be placed at the end of all the items as B=0, C=0, D=0 and A=1.
Similarly changing the order to -1 to let’s say C will result in the following sequence:
C= -1, B=0, D=0, A=1.
align-self
Align-self will individually align the item across the cross axis of a flex container.
The key difference between align-items and align-self is that, align-self works on only one item whereas align-items will align all the items.
Here we have given the align-self to flex-start.
flex-grow and flex-shrink
There could be times in our parent container where we want the items to occupy the remaining space available after they have been rendered.
This is especially true if we have specified a fixed width to an element and yet want them to adjust and occupy the maximum possible space they can.
Now the other use case here could be that we have multiple items in a flex-container and we want each item to occupy the remaining space in a fixed ratio, like first item should occupy ¼ of the space and the last item should occupy 3/4th and so on.
Flex-grow is a property that helps us to dynamically resize the flex-items based on the above logic.
By default, the flex-grow property has a 0 value.
When we specify flex-grow to two elements, let’s say A=1, B=5, this means that the remaining space needs to be divided into 6 equal halves with A taking ⅙ of the total space and B occupying ⅚ of the same irrespective of their fixed size.
If flex-wrap is applied, till the items are able to adjust in the given width of the flex-container, there would be no change in the items dynamic size even if the flex-grow property is applied.
However, this will immediately change if the width of the flex-container decreases with the item having flex-grow property occupying the maximum possible space in the next row.
If we add flex-shrink instead of flex-grow and set it to 0, the items will not shrink beyond their specified width. On the reverse, the flex-shrink behaves opposite to the flex-grow, allowing elements to shrink beyond their specified width in a flex-container.
flex-basis vs width and height
flex-basis simply defines the size of an element on the main axis.
When set under the “row” configuration, flex-basis will override the width property of any element in a flexbox-container.
This reverse in order to height setting if the configuration for flexbox is set to be at “column”
If flex-basis is set to auto, it will revert back to the specified height and width.
Summary
Flexbox can be summarised as below:
So we now know about styling our webpage with a Flexbox! Flexbox builds the responsive behaviour for us and ensures that our users see a uniform and well built experience for any device!
For the next part, we shall be broadening our understanding of the CSS Grid! One of the key and in demands skills in CSS is the know how to build a Grid. The part 11 of the Learning CSS series will cover this whole topic in depth!
Can’t believe its been 3 months since I started writing blogs! I soon intend to write something for this year’s Open source celebration – the Hacktoberfest 2021, so stay tuned for that!!
If you wish to read this whole info in a form of an easy to read book, do checkout the book “CSS Bullets, a comprehensive guide to all the CSS you need!”.
Thanks for sticking around!
Hope you like this series and stay tuned for more content on the learning.
Leave a Reply