Complete Flexbox CSS Code with Examples

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

Flexbox Container Example

Flexbox Container Example Image

a. display: flex | inline-flex ;
b. flex-direction: row | row-reverse | column | column-reverse ;

flex-direction example

flex-direction example

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;

flex-wrap exmple code

flex-wrap exmple code

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;

justify-content exmple

CSS flex justify-content exmple

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;

align-items flex box example

align-items flex box example

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;

align-content in flexbox

align-content in flexbox

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)

flex-items example

Flexbox items example

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.

flex css order property

flex CC 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.

flex-grow css property

flex-grow css property

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)

align-self CSS3 property

Flexbox align-self CSS3 property

Comments