Flexbox/Flex Property of CSS

The Flexbox/Flex is an important part of CSS and interesting to learn. However it is kind of hard to understand for beginners. Flexbox is whole module, not to be confused with a single property. Hence, the attempt to simplify the module as much as possible.

TOC:

1. What is Flexbox?
2. Flex Container and Flex Items
3. Layout of a Flex container
4. Properties of Parent(Flex Container)
5. Properties of Children(Flex Items)

What is Flexbox?

Flex box provides an efficient way to layout, align and distribute the space among items in a container, even if the size of items is unknown or dynamic in nature.
Main idea of flexbox is that the container can alter the item’s width and height to best fill the available space and to accommodate all types of display device and screen size.
Since flexbox can expand to fill free space or shrink to prevent overflow, they are most suitable for components of an application or small scale layouts. It’s really helpful in creating complex applications.

Flex Container and Flex Items

The properties that are set on the parent container are Flex Container. Similarly the properties that are set on children are called Flex Items.

Layout of a Flex Container

The layout of a flex container is based on flex-flow direction. The items are laid out according to the main axis or the cross axis.

•Main axis: The main axis of the flex container is the primary axis along which the flex items are laid out. It could be in either horizontal or vertical direction.
•Main start/Main end: The flex items are placed inside this boundary.
•Main size: A flex items width or height whichever is in the main dimension is called the main size. In the above diagram it’s the width of the container.
•Cross axis: The axis perpendicular to the main axis is the cross axis. The direction of this axis depends on main axis.
•Cross start/ Cross end: The items are filled from cross start towards cross end in the flex container.
•Cross size: A flex items width or height whichever is in the cross dimension is called the cross size. In the above diagram it’s the height of the container.

Properties of Parent(Flex Container)

1.Display: It defines the flex container. It provides flex context for its direct children.

.container{
    display: flex;
}

2.Flex-Direction: It establishes the main axis, thus defining the directions items are placed.

.container{
    flex-direction:row|row-reverse|column|column-reverse;
}

3.Flex-Wrap: By default the items are laid out in one line. So wrapping can make it multi-line for a more visually appealing representation.

.container{ 
   flex-wrap:nowrap|wrap|wrap-reverse;
 } 

/*nowrap: items are laid in one line(default value)
wrap: items are laid in multiple lines from top to bottom
wrap-reverse: items are laid in multi-line from bottom to top */ 

4.Flex-flow: It is the combination of flex-direction and flex-wrap. It is easier to use this shorthand to define both properties at once and its default value is set to ‘row nowrap’.

5.Justify-content: It defines the alignment along the main axis. The property distributes the free space to items if they are inflexible or flexible but reached their maximum size. It also prevents items from overflowing out of container.

.container{
    justify-content: flex-start|flex-end|center|space-evenly|space-between|space-around;
}

6.Align-items: It defines the behavior of flex-items in cross axis.

.container{
 align-items:center|flex-start|flex-end|stretch|baseline
}

7.Align-content: It is same as justify-content but in cross axis. It only takes effect on multi-line flexible containers whose flex-flow is set to wrap or wrap-reverse.

Properties for the Children(Flex Items)

1.Order: It controls how the items appear in a flex-container. Default value is 0

.item {
  order: 4; 
}

2.Flex-Grow: It can allow items to grow in the container if necessary. The values indicates how much space the item will take. The default value is 0 and negative numbers are invalid.

.item {
  flex-grow: 3; 
}

3.Flex-Shrink: The ability of flex item to shrink if necessary. The default value is 1 and negative numbers are invalid.

.item {
  flex-shrink: 4; 
}

4.Flex-Basis: It defines the default size of an element before the remaining space is distributed.

.item {
  flex-basis:  | auto; /* default auto */

/* If set to 0, the extra space around content isn’t factored in. If set to auto, the extra space is distributed based on its flex-grow value*/
}

5.Flex: It is the combination of flex-grow, flex-shrink and flex-basis. It is recommended that you use this shorthand property rather than set the individual properties.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

6.Align-self: It allows the default alignment or the one specified by align-items to be overridden for individual flex items.

 .item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Well that’s what I understood, some of it might still be confusing and it can only be cleared if you implement these properties in a project.

References:
CSS-Tricks
W3schools.com

A fun way to learn all the properties
FlexBox Froppy

Do let me know your thoughts on the blog and follow my Twitter and LinkedIn handles.