Flexbox in css?

Question

What is the purpose of a flexbox is Css?

Answer 1

Well, in CSS everything is a box and you can make boxes have a certain size or color etc.

CSS also defines certain "display modes" which are used to move boxes around. The oldest and most common ones are "block" and "inline" which work fine most of the time. "flexbox" is relatively new to CSS and it makes it easier to position boxes inside of other boxes.

For example, with flexbox you can easily have 5 boxes next to each other in a column layout. You can take an image and perfectly center it on the page with 3 lines of CSS. You can have 2 boxes on top of each other such that the first box is 100 pixels high, and the other gets the rest of the available space.

All of this was possible before flexbox (possibly with the help of javascript), but flexbox makes it a lot easier.

Answer 2

Flexbox is like a grid but with one dimension, it allows you to let the items flow in a specific custom pattern compared to the traditional automatic placement.