Question 1

What is CSS Flexbox?

Accepted Answer

Flexbox (the CSS Flexible Box Layout) is a one-dimensional layout system for arranging items in a row or a column. You set display: flex on a container, and its direct children become flex items that you can align, distribute and wrap along a single axis. It is ideal for navigation bars, toolbars, card rows and centering content.

Question 2

What is the difference between justify-content and align-items?

Accepted Answer

justify-content positions items along the main axis (the direction set by flex-direction, horizontal for row), controlling spacing such as center, space-between or space-around. align-items positions items along the cross axis (perpendicular to the main axis, vertical for row), controlling whether they sit at the start, center, end, baseline or stretch to fill.

Question 3

What are the main axis and cross axis in Flexbox?

Accepted Answer

The main axis is the direction flex items flow, set by flex-direction: row makes it horizontal, column makes it vertical. The cross axis is always perpendicular to it. justify-content works on the main axis, while align-items and align-content work on the cross axis, so swapping flex-direction also swaps which property controls horizontal versus vertical alignment.

Question 4

What does flex-wrap do?

Accepted Answer

flex-wrap controls whether flex items stay on a single line or break onto multiple lines. nowrap (the default) forces everything onto one line and may shrink items; wrap lets items flow onto new lines when they run out of room; wrap-reverse wraps in the opposite cross-axis direction. align-content only has a visible effect once items wrap onto more than one line.

Question 5

How does the gap property work in Flexbox?

Accepted Answer

gap adds consistent spacing between flex items without needing margins, and unlike margins it never adds space on the outer edges of the container. A single value like gap: 16px applies between both rows and columns when items wrap. It is widely supported in modern browsers and is the cleanest way to space out a flex layout.

FlexboxGenerator

Flexbox
Generator