How to Make a Flex Item Span the Full Width of a Row Below Other Flex Items?

Full-Width Flex Items in Row

You aim to maintain the first two child elements on a single row while positioning the third item below it at full width, utilizing flex for this layout.

Question:

How do you compel the "label" element to span the entire width of the row beneath the first two flex-positioned elements?

Answer:

To force a flex item to span a full row, apply width: 100% or flex-basis: 100%, and enable wrap on the container. The following adjustments will achieve this:

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

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

With these changes, the "label" element will occupy a full width below the other two elements, while maintaining the desired flex positioning for the first two child elements.

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