4

We have flex container with 2 child elements.

When we resize window, and one of flex item wraps, we have each element on its own row.

Is it any selector like :when-alone-in-row?

.flex-parent {flex-flow: row wrap}
    .flex-child
    .flex-child
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Vanyatwo
  • 51
  • 5
  • 4
    No, there is not. – Michael Benjamin Sep 26 '16 at 13:52
  • 1
    You might be able to get something similar to what you're asking with CSS media queries – Horia Coman Sep 26 '16 at 13:53
  • *Show* your HTML, don't describe it to us; language is far too ambiguous in most cases to adequately describe structure. Please see: the "*[MCVE]*" (and "*[ask]*") guidelines. – David Thomas Sep 26 '16 at 13:53
  • 3
    It depends on what is is you are trying to acheive when there is only one item on the row. There are techniques that *might* help here but at the moment this looks like an XY Problem. – Paulie_D Sep 26 '16 at 14:01
  • @DavidThomas we are in css/css3/flexbox section, I think it's clear to understand that .flex-parent - class of item with proper css attr, and .flex-child - it's child elements of flex-parent. – Vanyatwo Sep 26 '16 at 15:11

2 Answers2

1

No, there is no selector similar to :when-alone-in-row.

However, when you want to select the first and last elements from a group of siblings (which would be the case here since you're dealing with only two flex items), you can use the :first-child and :last-child pseudo classes.

Of course, the styles applied by these selectors will work even when both items are on the same line, unless they're applied in a media query.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • When flex-wrap works - it knows width of items and knows when do wrap, and status of each-element wrap position. I want to use that knowledge :) Using :first-child/:last-child/:nth-child would be "backend" solution as queries (they don't know how much content in element) without knowing of client responsive layout, it's "hardcode", for now I want maximum of responsive code. – Vanyatwo Sep 26 '16 at 15:14
  • Well then you may have to use JavaScript. – Michael Benjamin Sep 26 '16 at 15:19
  • I prefer to use clear CSS... flex again goes trash like display:table and other "good" solutions :( – Vanyatwo Sep 26 '16 at 15:34
1

If it always collapses at the same screen size you could use media queries to adjust the styles when they are on their own row.

If not, it might be worth also using media queries for the collapsing, so you can better control your rows / columns.

JakeSidSmith
  • 819
  • 6
  • 12