Contents

<section id="flex-box">
  <h2>Flex Box <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss">View source</a></h2>
  <p>The flex-box mixin is based on the 2009 w3c spec. <a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">More info</a></p>

{% highlight scss %}
div.parent {
  @include display-box;
  @include box-align(start);
  @include box-orient(horizontal);
  @include box-pack(start);
}

div.parent > div.child {
  @include box-flex(2);
}

// Alternative custom shorthand mixin.
div.parent {
  @include box($orient: horizontal, $pack: center, $align: stretch); // defaults
  @include box(vertical, start, stretch);
}
{% endhighlight %}
</section>

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
bourbon-2.1.0	_includes/flex-box.html