.wrapper {
border: 5px solid pink;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.a-fc {
background-color: purple;
width: 300px;
/*height: 100px;*/
}
.b-fc {
background-color: orange;
display: flex;
flex-direction: column;
/*flex-wrap: wrap;*/
flex-basis:70px;
flex-grow:1;
}
.b-fc > * {
flex-grow: 1;
flex-basis: 100px;
}
.b-fc > *:nth-child(1) {
background-color: red;
}
.b-fc > *:nth-child(2) {
background-color: blue;
}
.b-fc > *:nth-child(3) {
background-color: green;
}<div class="wrapper">
<div class="a-fc">
<div>a1</div>
</div>
<div class="b-fc">
<div>b1</div><div>b2</div><div>b3</div>
</div>
</div>FC = flex-container. FI = flex-item.
I have successfully implemented a solution where .b-fc shifts to a new row when the available space on the initial row falls below 70px.
My current objective: I want the FIs of b-fc to stack vertically if they don't fit on one row without wrapping. However, if b-fc wraps, I want the FIs to align horizontally.
Potential Solution
I believe it would be more efficient to apply CSS specifically for when .b-fc wraps. Is this feasible?
Idea: Implementing media queries
An alternative approach could involve using media queries to detect when the second row is created and then applying CSS styles to .b-fc.
P.S. A similar query was raised in 2015, as seen here. Perhaps there have been advancements in techniques since then.