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

Force Flex Item to Span Full Row Width

When working with flex layouts, it's often necessary to position elements systematically. In this case, the goal is to align the first two child elements on the same row while placing the third element below at full width.

Solution Using Flex Properties

To achieve this, set the following properties on the first two elements:

flex-grow: 1;
flex-shrink: 1;

This means they will expand and shrink to fill the available space equally.

For the third element, use the following properties:

flex-grow: 0;
flex-shrink: 0;
flex-basis: 100%;

This ensures that it remains the original size, does not shrink, and occupies the full width of the container when there is enough space.

Incorporating Dynamically Added Elements

Since the label element is added programmatically, it's crucial to adjust the CSS to accommodate it. By setting the following properties on the label element, it will span the full width below the first two elements:

display: block;
width: 100%;

Final Code Snippet

Here's an example that incorporates these solutions:

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

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

#range, #text {
  flex: 1;
}

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

This should force the label element to span 100% width below the first two elements, maintaining the desired layout.

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