Lesson 5 of 11By Aryan Gupta
Last updated on Mar 24, 20211277CSS 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:
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.
Let’s get ourselves familiar with the basic terminology that is common in flexbox.
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. |
Chrome |
Firefox |
Safari |
Opera |
29.0 |
22 |
10 |
48 |
Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details!
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.
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.
Full Stack Web Developer - MEAN Stack
Post Graduate Program in Full Stack Web Development
*Lifetime access to high-quality, self-paced e-learning content.