What is flexbox?
A one-dimensional layout model for distributing space between items in rows or columns, with powerful alignment capabilities.
How do you create a flex container?
Set display: flex (block-level) or display: inline-flex (inline-level) on the container element.
What are the two axes in flexbox?
The main axis (defined by flex-direction) and the cross axis (perpendicular to the main axis).
What is the default value of flex-direction?
row — items are laid out horizontally in the inline direction of the current writing mode.
What are the four possible values of flex-direction?
row, row-reverse, column, and column-reverse.
What does flex-wrap do?
Controls whether flex items are forced onto a single line or can wrap onto multiple lines. Default is nowrap.
What is the flex shorthand property?
A shorthand for flex-grow, flex-shrink, and flex-basis — e.g. flex: 1 1 auto.
What does flex: initial mean?
Equivalent to flex: 0 1 auto — items won’t grow beyond their basis size but can shrink.
What does flex: auto mean?
Equivalent to flex: 1 1 auto — items can both grow to fill space and shrink if needed.
What does flex: none mean?
Equivalent to flex: 0 0 auto — items are fully inflexible, they neither grow nor shrink.
What does flex: 1 mean?
Equivalent to flex: 1 1 0 — items grow proportionally from a flex-basis of zero, sharing available space equally.
What property aligns items along the cross axis?
align-items — applied to the flex container. Default value is stretch.
What property distributes space along the main axis?
justify-content — applied to the flex container.
What does align-self do?
Overrides the container’s align-items value for an individual flex item.
How do you vertically and horizontally center a flex item?
Set align-items: center and justify-content: center on the flex container.
What is the order property?
It controls the visual order of flex items without changing the DOM order. Default value is 0; higher values appear later.
Do float, clear, and vertical-align work on flex items?
No — they have no effect on flex items.
What happens when flex items wrap?
Each line acts as its own flex container. The align-content property controls spacing between lines.
How can you push one flex item to the far end using margins?
Set margin-left: auto (in a row direction) on that item — it absorbs all remaining space on the main axis.
What is the gap property in flexbox?
It sets the spacing between flex items without adding margins. Accepts one value (both axes) or two values (row-gap and column-gap).
