A Complete Guide To Flexbox

Oct 13, 2021

Chirag Patel

By Chirag Patel

What is Flexbox?

This is a way of designing, aligning items and distributing surplus space.

Flex stands for flexibility, adaptability. Thus, flexible layout elements are flexible boxes. The ability to fill extra areas without using javascript is one of the key advantages of flexbox.

Flexbox is a one-dimensional layout approach that allows you to arrange things in rows or columns.

CSS flexbox is superior for horizontal and vertical alignment of objects within the section, even if their size is unknown and/or dynamic.

Flexbox = Flexible + Box

Flex Browser & Layout Support:

By September 2020, CSS Flexible Box Layouts are supported by 98.69% of the installed browsers, or by 99.29% of the desktop and 100% of mobile.

All desktop/mobile/tablet browsers with the newest version support, in addition to the IE 11 desktop browser. Partial support is provided in the IE 11 desktop browser.

Flex CSS Syntax:

div { display: flex; } => [ div: Selector | display: Property | flex: Value ]

Flexbox Example With Different Requirement:

Main axis: Main axis stands for a flex container as the primary axis, all flex items are managed with the main axis.

Main-start | main-end: The flex items are placed within the container starting on the main-start side and going toward the main-end side.

Main size | main size property: The width or height of a flex container or flex item, whichever is in the main dimension, is that box’s main size.

Cross axis: The axis perpendicular to the main axis is called the cross axis. It extends in the cross dimension.

Cross-start | cross-end: Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.

Cross size: Cross size defines all flex items vertical heights

Also Read:[What Is A Headless Content Management System(CMS)?]

How to create Flex Containers using flex or inline-flex

Property: display

Value: flex | inline-flex

Applies to: flex containers

flex: The flex value contains full width.

inline-flex: With the inline-flex value contain inline width based on content.

.flex-container { display: flex; }

How to set Ordering and Orientation in flex.

2.1. Flex Flow Direction: the flex-direction property

Property: flex-direction

Value: row | row-reverse | column | column-reverse

Initial: row

Applies to: flex containers

row: flex items arranged in horizontal alignment, sequence 1 2 3.

row-reverse: flex items arranged in reverse horizontal alignment, sequence 3 2 1.

column: flex items arranged in vertical alignment, sequence 1 2 3.

column-reverse: flex items arranged in reverse vertical alignment, sequence 3 2 1.

.flex-container { flex-direction: row; }

How to wrap content using flex-wrap

Property: flex-wrap

Name: flex-wrap

Value: nowrap | wrap | wrap-reverse

Initial: nowrap

Applies to: flex containers

nowrap: The flex container is single-line.

wrap: The flex container is multi-line.

wrap-reverse: Same as wrap but, line sequence reverse order not items.

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

How to display contents using Display Order Property

Property: : order

Name: order


Initial: 0

Applies to: flex items

order: defines the flex items order.

HTML Structure:




CSS Style:

main { display: flex; }

main > article { order: 2; min-width: 12em; flex: 1; }

main > nav { order: 1; width: 200px; }

main > aside { order: 3; width: 200px; }

How to set width using Flex items width

Applies to: flex items

.flex-item { width: 80px; } => Set flex items width with 80px.

.flex-item { width: 80px; flex: auto; } => Set flex items width according to row remaining space but, consider flex items width 80px or m

How to set content horizontally using justify-content property.

flex items horizontal alignment property:

Property: : justify-content

Value: flex-start | flex-end | center | space-between | space-around

Initial: flex-start

Applies to: flex containers

.flex-container { justify-content: flex-start; }

How to set content vertically using align property?

flex containers vertical alignment property:

Property:: align-items

Value: flex-start | flex-end | center | baseline | stretch

Initial: stretch

Applies to: flex containers

.flex-container { align-items: stretch; }

Property: align-self

Value: auto | flex-start | flex-end | center | baseline | stretch

Initial: auto

Applies to: flex items

.flex-items { align-self: auto; }

baseline: practically baseline alignment consider same as flex-start.

Flex Property Index:

Not Supported CSS Property in Flexbox:

In the context of Flexbox Layout, some characteristics designed to assume the block layout don’t apply.

CSS Property not supported:

The column* properties in the Specific[CSS3 col-*] Multi-column Layout module has no impact on a flex container.

Float and clear have no effect and do not take off-flow on the flex item. The float property may, however, still affect the flex box.

A flex item has no vertical-align effect.

the ::first-line and ::first-letter pseudo-elements do not apply to flex containers, and flex containers do not contribute a first formatted line or first letter to their ancestors.

Wrapping up

Over the next few years there will still be handy floats, tables and all other strategies for layouting dead soon. Each member of this “family of layout tools” nonetheless has some limitations in developing layouts. These drawbacks stem from standards which did not anticipate the layouts of today. That is why Flexbox comes in handy.

Are you looking for similar services ?


More from us

Steps to Find The Right Offshore Development Company

Steps to Find The Right Offshore Development Company

Introduction For software developers, outsourcing has become the new norm. Businesses have been forced to outsource due to the massive upheaval ...

Top Benefits of Hiring an Offshoring Development Partner

Top Benefits of Hiring an Offshoring Development Partner

Introduction Custom software application development always is a complex process. As it needs building of custom modules, features, and function...

Top eCommerce Trends to Power Up Your Online Business

Top eCommerce Trends to Power Up Your Online Business

Introduction Retail has been transformed by eCommerce. It has evolved to meet people’s evolving demands and to make online shopping more c...

Got a project for us?

Let's talk.

Reduce Development Cost by 60%

Faster Deployment, Highest Quality

100+ Software Engineers for Hire