I've gotten so used to using CSS hacks like positioning and floating and clearfixing over the years that it was at first hard for me to wrap my head around the magnificent simplicity of CSS Flexboxes. Here are my notes -- the properties listed and explained along with some examples that helped me understand.

.flex-container {
  display: flex;
}

<div class="flex-container">
  <div>flex item</div>
  <div>flex item</div>
</div>

Container properties

flex-flow

<flex-direction> || <flex-wrap>

Shorthand for setting the flex-direction and flex-wrap properties described below.

flex-direction

row | row-reverse | column | column-reverse

flex-wrap

nowrap | wrap | wrap-reverse

Controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

align-items

flex-start | flex-end | center | baseline | stretch

Sets the default alignment for all of the flex container’s items. This value can be overwidden on each individual flex item with align-self.

justify-content

flex-start | flex-end | center | space-between | space-around

Horizontally aligns content after any flexible lengths and any auto margins have been resolved; Helps distribute extra free space.

align-content

flex-start | flex-end | center | space-between | space-around | stretch

Vertical (cross-axis) alignment for milti-line (more than one row of flex items) flex containers

Flex Item (children) properties

order

<integer>

flex

initial | auto | none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

Default: 0 1 auto

initial ⇒ 0 1 auto -- Sizes the item based on the width/height properties.

auto ⇒ 1 1 auto -- Sizes the item based on the width/height properties, but makes them fully flexible, so that they absorb any free space along the main axis.

none ⇒ 0 0 auto -- sizes the item according to the width/height properties, but makes the flex item fully inflexible. This is similar to initial, except that flex items are not allowed to shrink, even in overflow situations.

Specifies the components of a flexible length.

When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box.

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly (below), as the shorthand correctly resets any unspecified components to accommodate common uses^[1]

<div class="flex-container">
  <div>foo</div>
  <div>bar</div>
  <div>fuuu</div>
  <div>buzz</div>
</div>
<div class="flex-container
  flex-auto">
  <div>foo</div>
  <div>bar</div>
  <div>fuuu</div>
  <div>buzz</div>
</div>

.flex-container {
  display: flex;
  flex-flow: row wrap;
  width: 170px;
}

.flex-container > * {
  flex: initial;
  min-width: 50px;
}

.flex-auto > * {
  flex: auto;
}

flex-grow

<number>

Default: 1

Determines how much the flex item will grow relative to the rest of the flex items in the flex container.

flex-shrink

<number>

Default: 1

Determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property.

flex-basis

auto | content | <width>

The initial main size of the flex item.

align-self

auto | flex-start | flex-end | center | baseline | stretch

Individual flex item property that overrides the default value set by the flex container's align-items property.

Aligning

Aligning with auto margins on flex items

One use of auto margins in the main axis is to separate flex items into distinct "groups". The following example shows how to use this to reproduce a common UI pattern - a single bar of actions with some aligned on the left and others aligned on the right.

<nav>
  <ul>
    <li>About</li>
    <li>Projects</li>
    <li>Interact</li>
    <li id="login">Login</li>
  </ul>
</nav>

nav > ul {
  display: flex;
}
nav > ul > li {
  min-width: min-content;
  /* Prevent items from getting too small for their content. */
}
nav > ul > #login {
  margin-left: auto;
}

Examples

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

Additional resources

• Solved by Flexbox: Cleaner, hack-free CSS
• Udacity: Responsive Web Design Fundamentals