5.4 KiB
Adding Flexbox To Our Website
Understanding Flexbox
It allows us to change the way our elements are displayed.
To use flex box we can add the display property with value flex to an element, and that element will now be turned into a flex container.
Inside our flex container, we will add different elements, which are also called flex items.
Once we add the flex construct we can add different properties to the parent (flex container) and the children (flex items).
| Parent Properties | Children Properties |
|---|---|
flex-flow |
... |
justify-content |
order |
align-content |
flex |
align-items |
align-self |
Creating A Flex Container
When you apply the display: flex; property to a parent element, all children inside that element will be displayed in a single row by default.
We can also use display: inline-flex, which as the name suggests turns the parent into a flex container but itself is an inline element.
Using flex-direction And flex-wrap
flex-direction has the default value row. Changing its value to column would display all the items in a single column or vertically. We also have row-reverse and column-reverse values for this property which display the items in the reverse order.
flex-wrap has the default value nowrap. If we change it's value to wrap, the overflown elements will jump to the next row. We also have also value wrap-reverse, which does the same as wrap but in the reverse order, that is the first element would jump to the next row if we reduce the width.
We also have a shorthand these two properties, which is flex-flow, e.g. flex-flow: row wrap;.
Understanding The Importance Of Main Axis And Cross Axis
The main axis if we apply the property flex-direction: row;, starts from top left with direction towards right, and the cross axxis is top left to bottom.
For flex-direction: column;, the main axis would be from top left to bottom, and the cross axis would be from top left to right.
We have two other values for flex-direction property, that are row-reverse and column-reverse, which has the same axis as row and column values but have opposite directions.
Working With align-items & justify-content
With align-items we can align our elements along the cross axis. The default value for this property is stretch. Other values are center, flex-start, flex-end, baseline etc.
To align items along the main axis, we use the property justify-content.
To see the available values, go to link for align-items, and link for justify-content.
What About The align-content
The last property to look at for the flex container is align-content. It is also used to align our items along the cross axis but for multiline flex containers, so it is used to determine the spacing between multiline container and has no effect for a single line flex container.
Flex Items
We can use different properties on flex items like order, flex (shorthand for flex-grow, flex-shrink and flex-basis) and align-self, to have impact on a single item.
Understanding The order Property
The order property changes the order of an item inside the flex container, the default value is 0. We can change its value to 1 or -1 to move the flex item to end or front of other items, based on the main axis. Or we can also use other numbers to order the items accordingly.
Working With align-self
Like the flex container property align-items, we use align-self also to position the element in cross axis, but instead of all the items it is used to position a single flex item. We can use the same flex-start, flex-end, center etc as values.
Understanding The flex-grow
The flex-grow property also has an initial value of 0. By applying flex-grow: 1; to a flex item, the element will fill the available space.
If we add flex-grow: 4; to another flex item, then the available width will be divided into 5 parts, 1/5th for the item with flex-grow: 1;, and 4/5th for the item with flex-grow: 4; applied.
If a flex item with flex-grow: 1; moves to a new line, it'll take the whole available space because that line won't have any other flex item to share the availabe space.
Applying flex-shrink
It defines the behavior as we decrease the width. By default decreasing the width would make flex items to shrink to a point where the items content requires the width.
The default value for flex-shrink is 1. If you change it to 0, then the flex item won't shrink below it's defined width.
We can also control the ratio by which the items shrink relatively, e.g. applying flex-shrink: 1; to an item and flex-shrink: 4; to another item will make this item shrink 4 times more than the first one.
Comparing flex-basis vs width & height
flex-basis defines the size of an element depending on the main axis. It is used to override the width or height properties depending on the main axis. It has the default value of auto.
For example, adding flex-basis: 300px; to a flex item with main axis set as row, it'll override the width property. And likewise for an item with main axis from top to bottom it'll override the height.