Using flexbox to wrap all or none

Question

Is there a way to achieve the following?

Starting with three items on a single row, if the total width exceeds the flex parent's width, snap to a column orientation.

The major constraint on a solution for my particular use case is that I am unable to use media queries to swap the flex-direction although this would probably be the easiest thing to do.

Media queries aren't a viable solution this case because the component is stand-alone and can be placed in a variety of locations which will dictate the container width independently of the browser width. If there is some magic whereby media queries can be based on a parent container rather than the page, that would be awesome, but I haven't seen anything like that so far.

In this fiddle the second div with longer names needs to be wrapped into three lines, but the closest I can get is two lines.

<div class="container">
    <span class="item">Dan Martinez&nbsp;</span>
    <span class="item">@DanMartinez101&nbsp;</span>
    <span class="item">an hour ago&nbsp;</span>
</div>

<br/>

<div class="container">
    <span class="item">Someone with a really long name&nbsp;</span>
    <span class="item">@AndAReallyLongHandle&nbsp;</span>
    <span class="item">about three million years ago&nbsp;</span>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
    width: 400px;
    background-color: 'red';
}

.item {
    white-space: nowrap;
    flex: 0 1 auto;
}

*...media queries can't be used to swap the flex-direction...* Not true. `flex-direction` can easily be changed with a media query. — Michael Benjamin, Nov 15 '15 at 23:35
@Michael_B Sorry for not stating that constraint more clearly. I meant that while that would work and is the easiest solution, I'm not able to do so in the current application. I'll update my question to be more clear on that. — Daniel Armando Martinez, Nov 16 '15 at 01:09
Maybe look into [***content queries***](http://stackoverflow.com/a/33333193/3597276). — Michael Benjamin, Nov 16 '15 at 01:56
Seems like a perfect case for [container queries](http://alistapart.com/article/container-queries-once-more-unto-the-breach), unfortunately it would be years til any browser vendor implement it. — tungd, Nov 16 '15 at 02:13
@Michael_B That looks closer to what I need, but instead of basing it on the number of items, I need to figure out a way to base it on the width of siblings I guess. — Daniel Armando Martinez, Nov 16 '15 at 02:16
@tungd can you add your comment as an answer so I can accept it? — Daniel Armando Martinez, Nov 18 '15 at 11:42

score 2 · Accepted Answer · answered Nov 19 '15 at 01:32

2

The problem can be solve with container queries. However none of the browser vendors implemented it (the spec is not finalized, AFAIK).

In the mean time you can use a polyfill: https://github.com/mlrawlings/containerqueries

answered Nov 19 '15 at 01:32

tungd

14,467
5
41
45

Using flexbox to wrap all or none

1 Answers1