CSS Flexbox: The Best Guide To Understand Flex Model

CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the look and formatting of a document written in a markup language. It provides an additional feature to HTML. CSS is generally used with HTML to modify the style of web pages and user interfaces. In this tutorial, we will learn about CSS flexbox.

What is CSS Flexbox?

CSS flexbox is a one-dimensional layout pattern that makes it easy to design flexible and effective layouts. The use of flexbox ensures that elements are properly placed and are predictable. Flex items are positioned inside a flex container along a flex line. By default, there is only one flex line per flex container.

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program
Learn the Ins & Outs of Software Development

Basics and Terminology

Let’s get ourselves familiar with the basic terminology that is common in flexbox.

  • main-axis: The main-axis is the primary axis of the flex container along which flex items are aligned.
  • main-start | main-end: The flex items are placed or set inside the container beginning with main-start and going up to main-end.
  • cross-axis: Cross-axis is referred to as the axis perpendicular to the main axis, and its direction depends on the main axis direction.

CSS Flexbox Properties




It is used to set the type of box used for an HTML element.


It is used to fix the direction of the flex items inside the flex container.


It is used to vertically align the flex items, across the cross-axis.


It specifies whether the flex items are forced in a single line or can wrap onto multiple lines.


It is used to align the flex container within it when there is extra space in the cross axis.


It is used on flex items. It overrides the container's align-items property.

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program
Learn the Ins & Outs of Software Development

Supporting Browsers














  • The justify-content property is used to define the alignment along the main axis.  
  • The align-items property defines the default behavior for how items are laid out along the cross axis (perpendicular to the main axis).
  • The flex-grow property specifies the extent to which the item will grow relative to the rest of the flexible items inside the same container.
  • The flex-basis property sets the initial main size of a flex item.
  • The flex-shrink property defines how much a flexbox item should shrink if there's not enough space available. 


Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program
Learn the Ins & Outs of Software Development


In this article, you learned about the popular CSS flexbox and how they work with modern browsers. You also saw some of the flexbox properties that are useful in working with flex elements and how to use them to achieve the different results in CSS.

Accelerate your career as a software developer through this Post Graduate Program in Full Stack Web Development course in collaboration with Caltech CTME. In just a few months, you'll learn modern coding techniques with Bootcamp-level intensity and gain all you need to be a full-stack technologist.

If you have any questions or feedback regarding our CSS flexbox article, let us know in the comments section. Our experts will get back to you as soon as possible.

About the Author

Aryan GuptaAryan Gupta

Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.