Flexing using FLEXBOX..
Flexbox like the name suggests is a CSS layout technique for efficient alignment and positioning of elements in a web page according to it’ s viewing environment. To start using a flexbox model, first you need to define a flex container. Lets see how to do that.
Please note that some CSS content used solely for illustration purpose is left out here.
So, we have a div container with 3 children in it. The elements appear as below in the browser since div is by default a block element.
To make the parent element into a flex container, we use the display property of CSS.
After defining the flex container, the display of items in browser changes as below:
Every element that comes under the flex container becomes flex items. The display value inline-flex will not make the flex items become inline, it makes the flex container display inline. This is the only difference between flex and inline-flex.
Flex container Properties
Now we can start looking at how to use different properties of flex.
1) Flex-direction
This property helps in the alignment of flex items horizontally or vertically. In flex terms, we use main axis(left → right) and cross axis (top → bottom) for describing horizontal and vertical directions. There are 4 possible values:
Even when we do not set flex-direction property explicitly, by default it takes the value flex-direction: row for a flex container.
2) Flex-wrap
Flex-wrap can take 3 values, wrap, nowrap, wrap-reverse. A flex container keeps on adding flex items on a single line. Sometimes due to this the fixed width of items also gets changed in order to accommodate every item in a single line. This is because flex container by default takes flex-wrap: nowrap value.
When we use flex-wrap: wrap, if items can no longer retain their specified width in that line, the items get splits into multiple lines with their original width.
flex-wrap: wrap-reverse breaks items into multiple lines in reverse order.
3) Flex-flow
This is a short hand property including both flex-direction and flex-wrap properties. A flex container defaults to flex-flow: row nowrap.
Some other combinations are:
flex-flow: row wrap-reverse || row wrap ||column-reverse wrap
4) Justify-content
This property is similar to text-align, it defines how items can be aligned if items do not use all available space on the main axis. It can take 5 values.
justify-content: flex-start
Aligns all flex items to the beginning of the line in container on main axis. This is the default value.
justify-content: flex-end
Aligns all flex items to the end of the line in container on main axis.
justify-content: center
Aligns all flex items to the center of the line in container on main axis.
justify-content: space-between
Aligns each flex item on the main axis in container by providing equal space between 2 adjacent items.
justify-content: space-around
Aligns flex items on main axis in container by providing space around each item.
justify-content: space-evenly
Aligns each flex item on the main axis in container by providing equal space around each item.
5) Align-items
This property defines how flex items can be aligned on the cross axis. It can take 5 values and default value is stretch.
align-items: stretch
In this the items are stretched to fit the container height. This works only if there is no cross size property like height defined for the individual items.
align-items: baseline
Aligns flex items along the base line of the cross axis in container. By default, the cross axis is vertical.
This means the flexbox items will align themselves in order to have the baseline of their text align along a horizontal line.
align-items: center
Flex items are positioned at the center of the cross axis in container.
To get the items aligned to the center of the container, you can use combination of justify-content and align-items.
align-items: flex-start
Flex items are positioned at the beginning of the cross axis in container.
align-items: flex-end
Flex items are positioned at the end of the cross axis in container.
6) Align-content
The align-content property modifies the behavior of flex-wrap property. It is similar to align-items but instead of aligning flex items, align-content aligns flex lines in the container. There should be multiple lines of items in the container for this property to have any effect.
1) align-content: stretch
Default value. Lines stretch to take up the remaining space in container.
2) align-content: center
Lines are packed toward the center of the cross axis in flex container.
3) align-content: flex-start
Lines are packed toward the start of the cross axis in flex container.
4) align-content: flex-end
Lines are packed toward the end of the cross axis in flex container.
5) align-content: space-around
Lines are evenly distributed in the flex container, with half-size spaces on either end.
6) align-content: space-between
Lines are evenly distributed in the flex container with equal space between the lines.
7) align-content: space-evenly
Lines are evenly distributed in the flex container, with equal space around them.
Flex item Properties
Now that different flex container properties are clear, it is time to know how to use different flex item properties.
1) Align-self
Align-self is used to position individual flex item in a container by overriding the align-items property defined for that container. This property takes all the values as same as align-items property. The default value is auto.
Here even though container has the property align-items: center, it is overridden by the flex item property align-self: flex-end.
2) Order
This property allows the reordering of flex items in a container without affecting the source code.
It may take on either negative or positive values. The default value for the order property is 0. The Flex items are displayed just as specified in the HTML source order when it has the default value order: 0.
Now suppose we want to change the order of items displayed without any change in source code. This is possible by assigning the order value for items you need to reorder. By giving a positive value, item moves forward and negative value moves item backward in the line.
Here, order of item 2 is default value 0 and the other items order value is changed so their position changes accordingly.
3) Margin
This property is used to define space around an item outside of any defined borders. It is possible to define margin for each side of an item using margin-top, margin-right, margin-bottom, margin-left properties.
All the margin properties can have the following values:
- auto — free space in browser is used up
- length — specifies a margin in px, pt, cm, etc.
- % — specifies a margin in % of the width of the containing element
We can also use short hand property margin to give space on all sides at once.
Item pink - margin: auto;
Item blue - margin-top: auto;
Item purple-margin-right: auto;
4) Flex-grow & Flex-shrink
The flex-grow and flex-shrink properties control how much a flex-item should “grow” (extend) if there are extra spaces, or “shrink” if there are no extra spaces. By default, flex-grow: 0 and flex-shrink: 1. They may take up any values ranging from 0 to any positive number.
item pink grew to take up all free space in the container.
item pink → flex-shrink: 4; //shrink to 4 times the original width
item purple → flex-shrink: 0; //original width maintained
5) Flex-basis
This dynamic property is used to define the width/height of an item based on the flex-direction. Flex-basis will override any other width: or height: properties if specifically declared anything other than flex-basis: auto (auto by default). When flex basis is set to auto, it first checks for a width or height property (based on direction) if none, it uses the elements content sizing.
When using flex-direction: column you should always use flex-basis to dynamically control your Flexbox’s sizing so that you have consistent and expected results because although width: will obey flex-shrink, height: will not.
If the element is not a flexible item, the flex-basis property has no effect.
6) Flex shorthand
The flex shorthand allows you set the flex-grow, flex-shrink and flex-basis properties all at once.
- flex: 0 1 auto → This is default value. This can also be written as flex: default.
- flex: 0 0 auto → This is same as flex: none because flex item does NOT grow or shrink
- flex: 1 1 auto → This is same as flex: auto because item grow to fit the entire available space and shrink if necessary.
- flex: positive_number → This is same as flex: positive_number 1 0
If you set only the flex-grow and flex-shrink values, flex-basis would default to zero. This is called an absolute flex. And when you set only the flex-basis, you get a relative flex.
If the element is not a flexible item, the flex property has no effect.
Additional Resources
flexboxfroggy -a cool game to learn flexbox
I have walked you through flexbox layout model in CSS, different properties of flex containers and flex items. It’ s a lot to take in first glance, so hop in and read along your CSS practice sessions and have fun with flexbox.