0

I'm placing an unknown number of div elements inside of a flex container.

.container {
  border: 1px solid red;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  gap: 10px;
  width: 170px;
}
.element {
  flex: 0 0 auto;
  height: 50px;
  width: 50px;
  border: 1px solid blue;
}
<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Originally, the width of the container is 80% percents of the window, so its width varies.

I'd like to style each one of the wrapped rows like a shelf, so that there is a bottom-border (and other elements) below all elements in a line. In the example above - there should be 3 shelves, and if the container get's wider - there will be a fewer shelves.

Can I achieve that using CSS only?

Forepick
  • 919
  • 2
  • 11
  • 31
  • like this: https://stackoverflow.com/a/55482019/8620333 ? – Temani Afif Mar 02 '21 at 14:42
  • @Forepick "style each one of the wrapped rows like a shelf" is not clear. What is a "shelf" suppose to look like in this scenario? "so that there is a bottom-border (and other elements) below all elements in a line". What color is the border? How thick is it? Must it connect from edge to edge of the container? What do you mean by "and other elements"? I thought the only elements in the container were the divs? – pretzelhammer Mar 02 '21 at 15:45
  • @TemaniAfif kind of, but in the example you attached there is a fixed width of 50%, while in my case the width of the element is absolute, but the container not, so that different number of elements can take place in each row. – Forepick Mar 02 '21 at 21:44
  • @pretzelhammer, a "shelf" is a specific style for row of elements, resulted by the wrap algorithm. Since in my case the container is 170 pixel wide - 3 rows have created. I'd like to have a bottom border (for instance) below each row, from side to side of the container, regardless the width of each contained elements. – Forepick Mar 02 '21 at 21:48
  • @Forepick the width:50%, is irrelevant. The solution can work with any width (check well the code to understand the logic) – Temani Afif Mar 02 '21 at 21:53

0 Answers0