Flexbox CSS Property Code List with Examples
Here we are going to discuss a very useful and helpful CSS property called Flex or Flexbox. The flex CSS property is very helpful in ordering boxes in a HTML page without using CSS floats. We have use Flexbox examples to elaborate flex-basis, flex-grow, flex-shrink, flex wrap, flex align right, flex-direction and all other Flexbox properties.
Support for flexbox (Flex CSS Property) in the browsers:
Numbers followed by -webkit-, -ms- or -moz- specify the first version that worked with a prefix.
Google Chrome (21.0 -webkit-) or above
Internet Explorer (10.0 -ms-) or above
Mozella Firefox (18.0 -moz-) or above
Safari Browser (6.1 -webkit-) or above
Opera 17.0 or above
So let’s start the flex CSS property examples.
List of all FLEXBOX Layout properties:
1. Properties for the Parent Element or the flex container
a. display: flex | inline-flex ;
b. flex-direction: row | row-reverse | column | column-reverse ;
i. row (default): start from left to right in ltr; right to left in rtl
ii. row-reverse: start from right to left in ltr; left to right in rtl
iii. column: It is same as row but it starts from the top to bottom
iv. column-reverse: It is same as row-reverse but it starts from the bottom to top
c. flex-wrap: nowrap | wrap | wrap-reverse;
i. nowrap (default): all flex items will be on one line if the container is small to fit all items in a row.
ii. wrap: flex items will wrap onto multiple lines, from top to bottom if the container is small to fit all items in a row.
iii. wrap-reverse: flex items will wrap onto multiple lines from bottom to top if the container is small to fit all items in a row.
d. flex-flow: <‘flex-direction’> |<‘flex-wrap’>
e. justify-content: flex-start | flex-end | center | space-between | space-around |space-evenly;
i. flex-start (default): items are packed toward the start line
ii. flex-end: items are packed toward to end line
iii. center: items are centered along the line
iv. space-between: items are evenly distributed in the line with equal space between them and the starting and the last item will touch the container.
v. space-around: items are evenly distributed in the line with equal space around them and the starting and the last item will not touch the container.
vi. space-evenly: items are distributed so that the spacing between any two items and event the space at the edges of the elements is equal.
f. align-items: flex-start | flex-end | center | baseline | stretch;
i. flex-start: It puts items in the top start of the line
ii. flex-end: It puts items in the top end of the line
iii. center: It puts items in the center cross-axis in a line
iv. baseline: It will align items such as their baselines align
v. stretch (default): It will stretch to fill the container (still respect min-width/max-width)
g. align-content: flex-start | flex-end | center | space-between | space-around | stretch;
i. flex-start: The lines will be packed to the start of the container
ii. flex-end: The lines will be packed to the end of the container
iii. center: The lines will be packed to the center of the container
iv. space-between: The lines will be evenly distributed; the first line is at the start of the container while the last one is at the end
v. space-around: The lines are evenly distributed with equal space around each line
vi. stretch (default): The lines are stretched to take up the remaining space
2. Properties for the Children (flex items)
a. order: (number); /* default is 0 */
The flex items are laid out in the source order by default. However, you can change the order of items to display with the order property.
b. flex-grow: (number); /* default 0 */
If all elements have flex-grow property set to 1 so the remaining space in the container will be given equally to all children. If one of the child element has flex-grow property set 2, the remaining space would take up twice as much space as the others if possible.
c. flex-shrink: (number) ; /* default 1 */
This property is used to define the ability for a flex item to shrink if needed.
d. flex-basis: | auto; /* default auto */
The flex-basis property specifies the initial length of a flexible item (If the element is not a flexible item, the flex-basis property will have no effect)
e. flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
The flex property sets the flexible length on flexible items.
f. align-self: auto | flex-start | flex-end | center | baseline | stretch;
The align-self flexbox property specifies the alignment for the selected item inside the flexible container (The align-self property overrides the flexible container’s align-items property)