1

I have a div that has flex-wrap, so the number of columns is decided on the fly. I then want to have this in a container, which has some padding and a different background color. I assume this is possible, but can't get it to work...

.container {
  background-color: blue;
  display: inline-block;
  padding: 5px;
}

.columns {
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  background-color: green;
}
<div class="container">
  <div class="columns">
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
    <span>Four</span>
    <span>Five</span>
    <span>Six</span>
    <span>Seven</span>
  </div>
</div>

https://codepen.io/Mersaul4/pen/dygKJyw

The parent should not take the whole page, that's why I am not using display: block.

j08691
  • 204,283
  • 31
  • 260
  • 272
M3RS
  • 6,720
  • 6
  • 37
  • 47

1 Answers1

-1

So, you mean you want each span to go to column ? I didn't quit understand the question. But, I think you mean you want each span to be in each column like one to seven column.

In that case : flex-direction: row; //not column

you can also use justify content: as your wish.//not mandatory

Also you meant you want to have it in a container like background color or margin to each column. In that case you can add class to span.

I still am not sure if I understood your question or not but I thought you meant you want one, two, three ---- seven to be each individual column.

Samin Arnob
  • 1
  • 3