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