From the course: CSS: Combining Grid and Flexbox

What is Flexbox? - CSS Tutorial

From the course: CSS: Combining Grid and Flexbox

Start my 1-month free trial Buy for my team

What is Flexbox?

“

- [Instructor] What is flexbox? Flexbox stands for flexible box. It's a layout module for CSS aimed at giving you an efficient way to arrange, organize, and size website elements to create highly adaptive designs. Flexbox is a great tool for creating web-based layouts. It provides an easy and clean way to arrange items within a container. Flexbox is popular among front-end web developers, since it allows developers to create multiple instances of dynamic layouts and effortlessly align content within containers. The way flexbox works is quite simple on the surface. You have a container, it's called the flex container, and you have children. These are any elements contained within the container, and they are referred to as flex items. The flex items are placed along flex lines. Items can be manipulated in layout, size, spacing, and move along both the vertical and horizontal axes using a multitude of operators. This allows you to best take advantage of the available space and lets elements arrange themselves automatically according to it. The flexbox module has been designed as a one-dimensional presentation model, and as such, it can provide space distribution between interface elements and offer powerful alignment functions. When we describe flexbox as one-dimensional, we describe the fact that flex box processes layouts in one dimension at a time, either as a row or a column. This can be compared to the two-dimensional model of CSS Grid layout, which controls columns and rows together. The benefits of flexbox are, it's responsive and mobile friendly, it makes positioning children elements much easier, we avoid the age old issue of margin collapse, and you can easily change the presentation order without ever touching the HTML. Furthermore, you can easily alter and control both the width and the height to best work within the parent element. Flexbox is direction agnostic, which makes it super useful for responsive designs. While it is possible to build out entire webpages using flexbox, in general, it works best for small-scale layouts. Now that you have the overall big picture, let's review some flexbox related terms and syntax.

Contents