Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I use "flex-flow: column wrap"?

Tags:

css

flexbox

Short version

When using flex-flow: column wrap and display: inline-flex, it doesn't shrinkwrap like inline-block:

enter image description here

(function() {    var ascending = true;    setInterval(function() {      var parent = document.getElementById('flex');      if (ascending) {        var child = document.createElement('p');        child.innerHTML = "foo";        parent.appendChild(child);      } else {        parent.removeChild(parent.children[0]);      }      if (parent.children.length <= 1) ascending = true;      if (parent.children.length >= 40) ascending = false;    }, 20);  })();  (function() {    var ascending = true;    setInterval(function() {      var parent = document.getElementById('failex');      if (ascending) {        var child = document.createElement('p');        child.innerHTML = "foo";        parent.appendChild(child);      } else {        parent.removeChild(parent.children[0]);      }      if (parent.children.length <= 1) ascending = true;      if (parent.children.length >= 40) ascending = false;    }, 20);  })();
#flexdesc {position: absolute; top: 25px;}  #flex {    top: 50px;    position: absolute;    display: inline-flex;    flex-flow: row wrap;    outline: 1px solid black;    padding: 3px;    max-height: 100%;    max-width: 180px;    align-content: flex-start;    transform: matrix(0, 1, 1, 0, 0, 0);    transform-origin: top left;  }    #flex > p {    margin: 0;    outline: 1px solid black;    height: 30px;    width: 30px;    align-self: flex-start;    transform: matrix(0, 1, 1, 0, 0, 0);  }  #failexdesc {position: absolute; top: 275px;}  #failex {    top: 300px;    position: absolute;    display: flex;    flex-flow: column wrap;    outline: 1px solid black;    padding: 3px;    max-height: 200px;    align-content: flex-start;    transform-origin: top left;  }    #failex > p {    margin: 0;    outline: 1px solid black;    height: 30px;    width: 30px;    align-self: flex-start;  }
<!DOCTYPE html>  <html>  <head>  <meta charset=utf-8 />  <title>JS Bin</title>  </head>  <body>    <div id="flexdesc">What I expect it to do</div>    <div id="flex">      <p>foo</p>            <!-- add extra "<p>foo</p>" here. -->    </div>    <div id="failexdesc">What it does</div>    <div id="failex">      <p>foo</p>    </div>  </body>  </html>

Notice how the size of each flex container changes (or doesn't change!)

I want this behavior because I want to place these element side by side for a horizontally scrolling website.

Why doesn't it shrinkwrap? How do I make it shrinkwrap?






Original question

flex-flow: row wrap is simple enough to understand. If nothing is "flexing", it acts similar to inline elements; It flows to the right until it can't do so anymore, at which point it makes a new row.

flex-flow: column wrap with display: flex is similar. It flows down, until it can't flow down anymore (max-width?), and then starts a new column. Of course, since the parent is display: flex, it's a block-level element, so that column will be halfway over due to the fact that align-content defaults to stretch. I could easily change that to flex-start to make the new column adjacent to the previous.

...but the container is still too wide. It's still a block, and fills the width of it's parent.

I need the flexbox to shrink-to-fit its columns. Why? I'm trying to use flexbox in a horizontally scrolling website. Granted, I could just let the children overflow, but that overflowing tends to... break things. So I figured I needed flex-flow: column wrap with display: inline-flex. I was hoping for a "top to bottom, left to right" effect, where the parent has no empty space.

...and then this happened. In chrome, the parent width is equal to the sum of the widths of the children, but otherwise, wrapping is normal. In firefox, the parent is full width, and just grows taller to accomodate the elements (I don't think firefox supports wrapping). In IE11, the width is correct, but the children just overflow down (even out of the body).

I'm so confused.

What am I doing wrong here? I understand that flexbox is a more recent feature, but I can't tell how much of this is my fault vs the browser.

By they way, I'm testing this in chrome. A chrome-only solution is fine by me. (But an elegant catch-all solution is always nice!)


Here's the code for the demo I linked to, in case jsbin is down:

var ascending = true;     setInterval(function() {       var parent = document.getElementById('flex');       if (ascending) {         var child = document.createElement('p');         child.innerHTML = "f";         parent.appendChild(child);       } else {         parent.removeChild(parent.children[0]);       }       if (parent.children.length <= 1) ascending = true;       if (parent.children.length >= 30) ascending = false;     }, 200);
#flex {    display: inline-flex;    flex-flow: column wrap;    outline: 1px solid black;    padding: 3px;    max-height: 100%;    align-content: flex-start;  }  p {    margin: 0;    outline: 1px solid black;    width: 10px;  }  body {    height: 150px;    width: 300px;    outline: 1px dashed black  }
<!DOCTYPE html>  <html>  <head>    <meta charset=utf-8 />    <title>JS Bin</title>  </head>  <body>    <div id="flex">      <p>f</p>      <!-- add extra "<p>foo</p>" here. -->    </div>  </body>  </html>
like image 373
uber5001 Avatar asked Sep 07 '13 02:09

uber5001


People also ask

What is Flex-Flow column wrap?

The flex-flow property is sub-property of flexible box layout module and also shorthand property for flex-wrap and flex-direction. Note:The flex property is useless when the element is not flexible item.


2 Answers

This was a bug indeed. Here the links to tracker:

https://bugs.chromium.org/p/chromium/issues/detail?id=247963 https://bugs.chromium.org/p/chromium/issues/detail?id=507397

As OP wanted:

I need the flexbox to shrink-to-fit its columns. Why? I'm trying to use flexbox in a horizontally scrolling website. Granted, I could just let the children overflow, but that overflowing tends to... break things. So I figured I needed flex-flow: column wrap with display: inline-flex. I was hoping for a "top to bottom, left to right" effect, where the parent has no empty space.

We can simply achieve it with flex-flow: column wrap;, align-content: flex-start; and a fixed height wrapper together.

http://output.jsbin.com/qixuxiduxe/1

#flex {   display: flex;   flex-flow: column wrap;   max-height: 100%;   width: 150px;   overflow: auto;   align-content: flex-start; }  p {   margin: 0;   align-self: flex-start }  body {   height: 150px; } 

Updated fiddle: http://jsbin.com/qixuxiduxe/1/edit?html,css,js,console

like image 177
Asim K T Avatar answered Sep 19 '22 23:09

Asim K T


If you don't know the height of each item or how many items you will have, a more flexible solution is this:

.parent {   column-count: 4 } .child {   display: inline-block;   width: 100%; } 

https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

You may also need to adjust margin-top of .child:first-child if they don't align to the top.

like image 25
Marcus Avatar answered Sep 18 '22 23:09

Marcus