How to force flex item to span full row width with CSS?

Spread the love

Sometimes, we want to force flex item to span full row width with CSS.

in this article, we’ll look at how to force flex item to span full row width with CSS.

How to force flex item to span full row width with CSS?

To force flex item to span full row width with CSS, we set the flex property.

For instance, we write

<div class="parent">
  <input type="range" id="range" />
  <input type="text" id="text" />
  <label class="error">Error message (takes full width)</label>
</div>

to add some elements.

Then we write

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

#range,
#text {
  flex: 1;
}

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

to make the outer div a flex container with display: flex;.

We make overflowing items wrap with flex-wrap: wrap;.

We then make the element with class error wrap fill the 2nd row by setting 100% fori flex-basis.

Conclusion

To force flex item to span full row width with CSS, we set the flex property.

Leave a Reply

Your email address will not be published. Required fields are marked *