Detect wrap with flexbox

Question

I know, it's a weird question. Imagine a list of items. Placed vertically. Is there a way to "detect" when my list has to be on multiple columns? (because of a lack of space) ?

I guess an example is more efficient: http://jsfiddle.net/KCarnaille/au8mpo9t/4/

.right{
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start; //change the option when 2 cols needed
}

I'm not talking about media queries What I want depends on items length, not screen size.

I dont think it's possible with CSS but, let's see :)

What I want :

You cannot with straight css. You could with media queries, which IS css. Are you familiar with media queries? — random_user_name, Dec 15 '15 at 16:13
@KCarnaille media queries are css it basically a way of running different css depending on the screen size. — Andrew Bone, Dec 15 '15 at 16:14
Don't really understand what you ask. When there is no space the items wraps automatically, so what do you want to do if not that? ... To clarify, maybe post 2 images showing what it does and what you want? — Asons, Dec 15 '15 at 16:14
Do you want to change the `right` elements property `justify-content` to `space-between` when 2 columns needed? — Asons, Dec 15 '15 at 16:19
Ok, if you have fixed height on both the children and the parent, check [this post](http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has) on how to, if not you need a script to do it. — Asons, Dec 15 '15 at 16:24
Really cool, it won't help me but it's really usefull, thanks. I'm gonna do this simply with javascript. — KCarnaille, Dec 15 '15 at 16:29
Possible duplicate of [How to detect CSS flex wrap event](https://stackoverflow.com/questions/40012428/how-to-detect-css-flex-wrap-event) — Brett DeWoody, Aug 19 '17 at 09:00

score 0 · Answer 1 · answered Dec 20 '15 at 04:58

I think you may want something like this:

.right::after {
  content: '';   /* Insert pseudo-element at the end */
  margin: auto;  /* Push other elements as much as possible */
}

body {
  display: flex;
}
.right {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  background-color: black;
  height: 400px;
  flex: 1;
  margin: 5px;
}
.right::after {
  content: '';
  margin: auto;
}
.thumb {
  color: #fff;
  border: 1px solid red;
  padding: 10px;
  background-color: #fff;
  color: #000;
}

<div class="right">
  <div class="thumb">1</div>
  <div class="thumb">2</div>
  <div class="thumb">3</div>
  <div class="thumb">4</div>
  <div class="thumb">5</div>
  <div class="thumb">Layout doesn't need to be on two columns,<br/>so I change justify-content property to flex-start</div>
</div>
<div class="right">
  <div class="thumb">1</div>
  <div class="thumb">2</div>
  <div class="thumb">3</div>
  <div class="thumb">4</div>
  <div class="thumb">5</div>
  <div class="thumb">6</div>
  <div class="thumb">7</div>
  <div class="thumb">8</div>
  <div class="thumb">9</div>
  <div class="thumb">Layout needs to be on two columns,<br/>so I change justify-content property to space-between</div>
</div>

Detect wrap with flexbox

1 Answers1