CODEWITHSUNDEEP
htmlcssflexbox
Toby
Toby

Reputation: 1671

Flexbox columns and rows

I'm trying to use CSS3 flexbox on my site with limited success.

I can create a lovely 3 column layout, but I want the third column to wrap under the second column at a certain screen resolution. Is this possible using flexbox, or do I have to revert to more traditional methods?

My code is at http://jsfiddle.net/eFeC3/, which shows how my code currently looks as well as the flexbox implementation.

<style>
body > * > *{background:#666;color:#eee;padding:40px;margin:20px;text-align:center;}
/* Flex */
article{display:-webkit-flex}
section{-webkit-flex:1;-webkit-order:2}
nav{-webkit-order:1}
aside{-webkit-order:3}

/* Nasty */
#b, #c {overflow:hidden}
#a{float:left;margin:0px 40px 80px 20px}
</style>
<body>
   <article>
      <section>1</section>
      <aside>2</aside>
      <nav>3</nav>
    </article>

<div id="demo">
    <div id="a">3</div>
    <div id="b">1</div>
    <div id="c">2</div>
</div>

Upvotes: 3

Views: 7247

Answers (1)

cimmanon
cimmanon

Reputation: 68319

Flex elements don't wrap by default. When you're making use of wrapping, it works best if you also specify a flex-basis to say this is the ideal width for this element.

http://codepen.io/cimmanon/pen/Axutc

article {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

section {
  -webkit-flex: 1 20em;
  -ms-flex: 1 20em;
  flex: 1 20em;
  -webkit-flex-order: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

nav {
  -webkit-flex: 1 10em;
  -ms-flex: 1 10em;
  flex: 1 10em;
  /* by default, flex elements have an order of 0 */
}

aside {
  -webkit-flex: 1 10em;
  -ms-flex: 1 10em;
  flex: 1 10em;
  -webkit-flex-order: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}

If the elements need to be reordered at a specific break point, then your only option is to use media queries. You can also use media queries to change the flex-basis to a percentage if you're dissatisfied with where it chooses to wrap on its own (eg. flex: 1 20%).

Upvotes: 1

Related Questions