How to Make a Flex Item Span the Entire Row Below Other Flex Items?

Force Full-Width Flex Item to Span Entire Row

Problem:

In a flex layout, the aim is to retain the first two child elements on a single row, while the third element occupies its own full-width row below. The challenge arises from the desire to utilize flex-grow and flex-shrink properties for the first two elements, while ensuring that the third element stretches to the full width of the parent container and appears below the first two.

Solution:

To force the third element to span 100% width and appear on a new row below the other two:

• Set flex-basis: 100% on the third element. This ensures it takes up all available space in its row and is pushed to a new line.
• Implement flex-wrap: wrap on the parent container. This allows flex items to wrap onto multiple rows, accommodating items that cannot fit within the current row's width.

Example Code:

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

#range, #text {
  flex: 1;
}

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

<div class="parent">
  <input type="range">

With this approach, the first two elements occupy the same row, sharing the available width, while the third element spans the full width of the parent container and is positioned on a new row below.

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