Skip to content

Instantly share code, notes, and snippets.

@bignimbus

bignimbus/flexbox-columns.html

Last active April 12, 2016 14:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bignimbus/0168828e0f9f8b8bc82052a598fabe68 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bignimbus/0168828e0f9f8b8bc82052a598fabe68 to your computer and use it in GitHub Desktop.
Download ZIP
Using flexbox to order a columned list top -> bottom then left -> right instead of the opposite. http://codepen.io/bignimbus/pen/LNQarP
Raw
flexbox-columns.html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Example</h1>
<section>
<!--
I want to display these numbers in two columns like so:
1 5
2 6
3 7
4 8
Until the viewport gets so small that we force them into one column
-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</section>
</body>
</html>
Raw
style.scss
// using bourbon mixins
section {
@include display(flex);
@include flex-direction(column);
@include flex-wrap(wrap);
height: 163px;
@media screen and (max-width: 400px) {
height: auto;
}
> div {
@include flex-grow(1);
@include flex-shrink(1);
@include flex-basis(25%);
width: 49%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment