Which CSS property allows you to reorder flex items without changing the HTML structure?

Which CSS property allows you to reorder flex items without changing the HTML structure?

• A. order
• B. flex-direction
• C. align-items
• D. justify-content

Answer: (A)

The reordering of flex items without changing the HTML structure is done with the order property. Each flex item can be assigned an order value, and items are laid out along the main axis in increasing order value. Lower numbers come first, so you can visually move an item to the front or back by giving it a smaller or larger order. The DOM order stays the same, which helps keep the document structure intact for accessibility and search engines. If two items share the same order value, they keep their original DOM order. The other properties don’t achieve this kind of reordering. flex-direction changes the direction of the main axis (row vs column) and can affect how items flow, but it doesn’t reorder items independently of the HTML. align-items controls alignment along the cross axis, and justify-content distributes space along the main axis; neither reorders items.

The reordering of flex items without changing the HTML structure is done with the order property. Each flex item can be assigned an order value, and items are laid out along the main axis in increasing order value. Lower numbers come first, so you can visually move an item to the front or back by giving it a smaller or larger order. The DOM order stays the same, which helps keep the document structure intact for accessibility and search engines. If two items share the same order value, they keep their original DOM order.

The other properties don’t achieve this kind of reordering. flex-direction changes the direction of the main axis (row vs column) and can affect how items flow, but it doesn’t reorder items independently of the HTML. align-items controls alignment along the cross axis, and justify-content distributes space along the main axis; neither reorders items.