Force flex item to span full row width

by

When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100%, and enable wrap on the container.

The item now consumes all available space. Siblings are forced on to other rows.

.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" id="range">
  <input type="text" id="text">
  <label class="error">Error message (takes full width)</label>
</div>

More info: The initial value of the flex-wrap property is nowrap, which means that all items will line up in a row. MDN

More Related Contents:

  1. Flexbox: center horizontally and vertically
  2. CSS-only masonry layout
  3. Make container shrink-to-fit child elements as they wrap
  4. When flexbox items wrap in column mode, container does not grow its width
  5. One flex/grid item sets the size limit for siblings
  6. Why are flex items not wrapping?
  7. Make grid container fill columns not rows
  8. Align an element to bottom with flexbox
  9. Make background color extend into overflow area
  10. Center text over an image in flexbox
  11. Using flex order property to re-arrange items for desktop and mobile views
  12. Why can’t be flex containers?
  13. Flexbox fill available space vertically
  14. Prevent flex items from rendering side to side
  15. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  16. What’s the difference between flex-start and baseline?
  17. Equal space between flex items
  18. How can I make a display:flex container expand horizontally with its wrapped contents?
  19. Text not centered with justify-content: center
  20. How to stretch flex child to fill height of the container?
  21. Flexbox resize and scrollable overflow [duplicate]
  22. How can I show three columns per row?
  23. CSS object-fit: contain; is keeping original image width in layout
  24. How to center horizontally and vertically?
  25. Flexbox on IE11: image stretched for no reason?
  26. extra space when centering elements using flexbox
  27. Height is not correct in flexbox items in Chrome [duplicate]
  28. display: flex not working on Internet Explorer [duplicate]
  29. Flex items create space between them when they wrap [duplicate]
  30. Fitting child into parent

Leave a Comment