I have a horizontal, wrapping flexbox, like so:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
The number of items per row will vary depending on the screen width, and the width of each item will vary as well.
I would like to add styling to only the first item of each flexbox row. Below is an illustration of what I'm looking for.
Example 1
|--------|--------|--------|
|style me| | |
|--------|--------|--------|
|style me| | |
|--------|--------|--------|
|style me| |
|--------|--------|
Example 2
|--------|---|-----|------------|
|style me| | | |
|--------|---|-----|------------|
| style me | | |
|---------------|------|--------|
| style me | |
|----------|------|
How can I do this using Flexbox?
I still need the rows to wrap as the screen is resized, so I don't think I can use Grid. However, if it is possible to use Grid to solve this problem, that would be a good solution for me as well.
This can be accomplished using CSS Grid and either the auto-fill
or auto-fit
values. See this question for details:
As @AndyHoffman already mentioned in the comments, (as of March 2019) it is impossible to do it with pure css. If you tolerate a bit of javascript, then you could iterate over all the flex children and see if their position indicates that they are in the first column and apply styling accordingly. A rudimentary example is shown in the snippet below:
function highlightFirst(){
let flexChildren = document.querySelectorAll('.content');
let leftPosition = flexChildren[0].offsetLeft;
for(let flexChild of flexChildren){
if(flexChild.offsetLeft <= leftPosition){
flexChild.classList.add('firstColumn');
}else{
flexChild.classList.remove('firstColumn');
}
}
}
window.addEventListener('resize', highlightFirst);
highlightFirst();
* {
list-style:none;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-wrap: wrap;
border: solid 1px black;
}
.content {
height: 20px;
background: grey;
margin: 5px;
}
.firstColumn {
border: 2px dashed red;
}
<ul class="wrapper">
<li class="content" style="width: 14px;">1</li>
<li class="content" style="width: 77px;">2</li>
<li class="content" style="width: 41px;">3</li>
<li class="content" style="width: 94px;">4</li>
<li class="content" style="width: 76px;">5</li>
<li class="content" style="width: 61px;">6</li>
<li class="content" style="width: 81px;">7</li>
<li class="content" style="width: 70px;">8</li>
<li class="content" style="width: 22px;">9</li>
<li class="content" style="width: 29px;">10</li>
<li class="content" style="width: 27px;">11</li>
<li class="content" style="width: 22px;">12</li>
<li class="content" style="width: 56px;">13</li>
<li class="content" style="width: 32px;">14</li>
<li class="content" style="width: 55px;">15</li>
<li class="content" style="width: 34px;">16</li>
<li class="content" style="width: 75px;">17</li>
<li class="content" style="width: 97px;">18</li>
<li class="content" style="width: 25px;">19</li>
<li class="content" style="width: 48px;">20</li>
</ul>
The example is really basic and rudimentary just to show a working principle, but in order to be usable in real-world scenarios it should be extended to circumvent the following shortcomings:
.wrapper
, but the support is really poor.