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.

In this tutorial, you will get an in-depth understanding of the following topics:

• What is CSS Flexbox?
• Basics and Terminology
• CSS Flexbox Properties
• Example

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.

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

Property	Description
display	It is used to set the type of box used for an HTML element.
flex-direction	It is used to fix the direction of the flex items inside the flex container.
align-items	It is used to vertically align the flex items, across the cross-axis.
flex-wrap	It specifies whether the flex items are forced in a single line or can wrap onto multiple lines.
align-content	It is used to align the flex container within it when there is extra space in the cross axis.
align-self	It is used on flex items. It overrides the container's align-items property.

Supporting Browsers

Chrome	Firefox	Safari	Opera
29.0	22	10	48

Example

• 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. 

Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details! 

Conclusion

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.