How to Make a Flex Item Occupy Full Width on a New Row?

Flex Row Full Width for Specific Item

You aim to force the "label" element to occupy the full width below two other flex-positioned elements. Here's how to achieve this:

Normally, flex items share available space equally. However, you want one item (the label) to occupy the entire remaining space on a new row. To do this:

1. Set Item Width to 100%: Assign the label element a width of 100% or use flex-basis: 100%. This ensures it consumes all remaining horizontal space.
2. Enable Container Wrap: Adjust the parent container to enable wrapping (flex-wrap: wrap). This forces sibling elements to flow onto new rows when space runs out.

Here's the updated code:

.parent {
  display: flex;
  flex-wrap: wrap;
}

.error {
  flex: 0 0 100%;
  border: 1px dashed black;
}

With these adjustments, the label element will span the full width of the row below the other two flex items, as desired.

The above is the detailed content of How to Make a Flex Item Occupy Full Width on a New Row?. For more information, please follow other related articles on the PHP Chinese website!