Flexbox

Properties

display: flex: Turns on Flexbox for this element.
flex-direction: Specifies direction of primary axis.
row | row-reverse | column | column-reverse
flex-wrap: Whether flex items should squish on a single line, or wrap.
nowrap | wrap | wrap-reverse
justify-content: Specifies justification of items in primary axis.
flex-start | flex-end | center | space-between | space-around

Examples

Basic, automatic widths in a row.

display: flex;

Box One

Example text here.

Box Two

Much longer text in this box. You will notice how the size of this box is taking up more space than the first box. It is behaving similarly to a table, and much easier than using CSS properties to fake a table (display: table).

Setting one item to a fixed-width.

.fixedItem {
	flex-basis: 250px;
	flex-shrink: 0;
}

Box One

Example text here. Much longer text in this box. You will notice how the size of this box is taking up more space than the first box. It is behaving similarly to a table, and much easier than using CSS properties to fake a table (display: table).

Box Two

Much longer text in this box. You will notice how the size of this box is taking up more space than the first box. It is behaving similarly to a table.

Distributing Items

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

Box 1

Box 2

Box 3

Wrapping Content for Responsive Sites

Boxes will try to fit on a single line, but will wrap as the browser window get narrower.

.flex { flex-wrap: wrap; }
.flexItem { width: 50%; min-width: 350px; }

Box 1 Making Every Pixel Count

Box 2 Making Every Pixel Count

Box 3 Making Every Pixel Count

Box 4 Making Every Pixel Count