Webkit Flexbox Patterns

Useful for both prototypes and Chrome-only projects, the following examples demonstrate simple patterns of the 2012 Flexbox specification. This is currently supported by Chrome, Firefox 28+, Safari & Mobile Safari 7+ (-webkit- prefix), and IE 11+.

Basic flexbox example showing children with fixed widths.

HTML

<div class="example example-f">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
</div>

CSS

.example-f {
    display: flex;
}

.example-f .box {
    height: 100px;
    width: 100px;
}

When no width is provided for the children they will collapse to width of their content.

box-1
box-2
content of box-3

HTML

<div class="example example-fnw">
    <div class="box box-1">box-1</div>
    <div class="box box-2">box-2</div>
    <div class="box box-3">content of box-3</div>
</div>

CSS

.example-fnw {
    display: flex;
}

.example-fnw .box {
    height: 100px;
}

All centered.

HTML

<div class="example example-fc">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
</div>

CSS

.example-fc {
    display: flex;
    justify-content: center;
}

.example-fc .box {
    height: 100px;
    width: 100px;
}

Centering multiple elements vertically and horizontally.

box-1
box-2

HTML

<div class="example example-center-vh">
    <div class="box box-1">box-1</div>
    <div class="box box-2">box-2</div>
</div>

CSS

.example-center-vh {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

.example-center-vh .box {
    height: 50px;
    width: 50px;
}

All justified right.

HTML

<div class="example example-fe">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
</div>

CSS

.example-fe {
    display: flex;
    justify-content: flex-end;
}

.example-fe .box {
    height: 100px;
    width: 100px;
}

Children with space in between.

HTML

<div class="example example-jcb">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
</div>

CSS

.example-jcb {
    display: flex;
    justify-content: space-between;
}

.example-jcb .box {
    height: 100px;
    width: 100px;
}

Last box with margin-left set to auto.

HTML

<div class="example example-mla">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
</div>

CSS

.example-mla {
    display: flex;
}

.example-mla .box {
    height: 100px;
    width: 100px;
}

.example-mla .box-3 {
    margin-left: auto;
}

Middle child set to flex.

HTML

<div class="example example-fm">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
</div>

CSS

.example-fm {
    display: flex;
}

.example-fm .box {
    height: 100px;
    width: 100px;
}

.example-fm .box-2 {
    flex: 1;
}

Last child set to flex.

HTML

<div class="example example-fl">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
</div>

CSS

.example-fl {
    display: flex;
}

.example-fl .box {
    height: 100px;
    width: 100px;
}

.example-fl .box-3 {
    flex: 1;
}

All children set to flex.

HTML

<div class="example example-ff">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
</div>

CSS

.example-ff {
    display: flex;
}

.example-ff .box {
    height: 100px;
    flex: 1;
}

Flexbox direction set to column.

HTML

<div class="example example-fdc">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
</div>

CSS

.example-fdc {
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 400px;
}

.example-fdc .box {
    height: 100px;
}

Column with last box margin-top set to auto.

HTML

<div class="example example-fdcma">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
</div>

CSS

.example-fdcma {
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 400px;
}

.example-fdcma .box {
    height: 100px;
}

.example-fdcma .box-3 {
    margin-top: auto;
}

Column with with center box flex and overflow scroll.

Accusantium nostrum optio reiciendis ad qui itaque voluptatibus sit doloribus pariatur eum odit maxime quaerat illo provident alias minus laborum voluptates animi ex dolores veritatis commodi.

HTML

<div class="example example-fdcms">
    <div class="box box-1"></div>
    <div class="box box-2">
        <div>Accusantium nostrum optio reiciendis ad qui itaque voluptatibus sit doloribus pariatur eum odit maxime quaerat illo provident alias minus laborum voluptates animi ex dolores veritatis commodi.</div>
    </div>
    <div class="box box-3"></div>
</div>

CSS

.example-fdcms {
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 400px;
}

.example-fdcms .box {
    height: 100px;
}

.example-fdcms .box-2 {
    flex: 1;
    overflow-y: scroll;
}