CSS Flexbox interview and Question

Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals.

1) What is CSS Flexbox

CSS3 Flexible boxes also known as CSS Flexbox is a new layout mode in CSS3.

The CSS3 flexbox is used to make the elements behave predictably when they are used with different screen sizes and different display devices. It provides a more efficient way to layout, align and distribute space among items in the container.

It is mainly used to make CSS3 capable to change its item’s width and height to best fit all available spaces. It is preferred over the block model.

The CSS3 flexbox contains flex containers and flex items.

2) Have you used Flexbox & CSS Grid before? What are the differences between them?

Recently we’ve seen the rise of Flexbox and even more recently, CSS Grid. While these aren’t well supported in older browsers, support for them in newer browsers is continuously growing, and now is the time to look into them and see if you can start using them. Make sure you check browser support!

Flexbox is a very useful layout tool, especially for smaller areas within the site. Its main features are to align items in horizontal or vertical axes, space them out automatically, invert the order in which they’re displayed, along with a few other layout options.

CSS Grid is more of a layout tool for the entire page. While Flexbox excels in laying out items along a single axis, Grid is better for layouts with both horizontal and vertical axes, i.e. grids!

3) To use flexbox we define a container as a flexbox. What is the CSS to do this?

Display:flex;

4) Flex-direction allows you to do what?

Define the direction of how elements are positioned based on either row or column

5) Flex-wrap allows you to do what?

Define how elements will wrap when the browser width is changed

6) Justify-content allows you to do what?

Defines how to position elements horizontally

7) Align-items allows you to do what?

Define how to position elements vertically

8) Flex-basis defines

The width of the flex element

9) The css property “order” for flex items allows you to

Specify in what order the flex items appear

10) Flex-grow is applied to the flex element, not the whole flexbox

True

11) How to create container using flex? give example.

To define and access a container as a flex container you can use display: flex;. If no additional rules are set, all direct children will be considered flex items and will be laid horizontally, from left to right. The width of flex items automatically adjusts to fit inside the container.

HTML

<div class = f-container>
  <div class = f-item-1 style=background-color:red;> Box - 1 </div>
  <div class = f-item-2 style=background-color:green;> Box - 2 </div>
  <div class = f-item-3 style=background-color:blue;"> Box - 3 </div>
</div>

CSS

.f-container {
     display:flex;
}  

12) How to wrap the box inside the flexbox container?

Ans: using “flex-wrap: wrap”

CSS Grid vs Flexbox

The last example does not only show how Flexbox is really helpful when it comes to positioning elements next to each other or below each other. It also shows how Flexbox and the CSS Grid can work together.

You create the overall layout with the Grid and use Flexbox to then position elements inside a cell – for all cases where you only need to position them in one dimension (row or column).

It’s of course also possible to nest the CSS Grid inside of a Flexbox item. You could have a row of elements where one or all elements hold a more complex layout for example.

The key differentiation really is the number of dimensions you need to work with.

Are you building a spreadsheet? You’re working with rows and columns then, so CSS Grid probably should be your choice.

You’re working on a list of users? Maybe Flexbox is your 1st tool then.

Mix and match both technologies as required and you’ll be able to build really flexible and powerful user interfaces!