Which CSS property is used to set the layout of an element as a flexible box?

Question

Options

• Adisplay: flex;
• Bposition: absolute;
• Cdisplay: block;
• Dlayout: flexible;

• A
  93% (38)
• C
  2% (1)
• D
  5% (2)

Explanation

display: flex; activates the Flexbox layout model on an element, making it a flex container whose children automatically become flex items that can be arranged, aligned, and distributed in flexible ways.

Why the distractors are wrong:

• B. position: absolute; - removes an element from the normal document flow and positions it relative to its nearest positioned ancestor; it has nothing to do with flexible layouts.
• C. display: block; - makes an element a block-level box (stacking vertically, taking full width), but does not enable any flexible or directional alignment features.
• D. layout: flexible; - this property does not exist in CSS; it's a plausible-sounding decoy.

Memory tip: Think "flex goes with display" - just like display: grid; enables Grid layout, display: flex; enables Flexbox. The keyword always pairs with the display property, and flex is the exact value name used in the spec.

No community discussion yet for this question.