Cacher is the code snippet organizer for pro developers

FLEXBOX

• Used to easily layout items rather than using BS's column structure
• Items will expand dynamically to fit the page better (more efficient when dealing with unknown sizes)
• Provides "true" centering, even if they overflow the flex container (unlike other CSS methods)!

Structure

• Uses a parent container called a flex-container
• Each child element in the container is called a flex-item
• Text inside an element is wrapped in an anonymous flex item

Axes

• The main axis is the axis along which the flex items follow each other.
• The cross axis is the axis perpendicular to the main axis.
• flex-direction property establishes the main axis.
• justify-content property defines how flex items are laid out along the main axis.
• align-items property defines the default for how flex items are laid out along the cross axis.
• align-self property defines how a single flex item it aligned on the cross axis, overriding the default established by align-items.

Properties for the parent container

---

• To display the flex features, attach the following to the parent container:

.container {
  display: flex; /* or inline-flex */
}

• To control the flex direction of the items within the container:
• Accepts one of the following arguments:
  • row: lines items from left to right
  • row-reverse: lines items from right to left
  • column: stacks items from top to bottom
  • column-reverse: stacks items from bottom to top

.container {
  display: flex; /* or inline-flex */
  flex-direction: row;
}

• By default, flex items will try to fit on one line, you can change this to allow the items to wrap
• Accepts one of the following arguments:
  • nowrap: all flex items will be on one line
  • wrap: flex items will wrap onto multiple lines from top to bottom
  • wrap-reverse: flex items will wrap onto multple lines from bottom to top

.container {
  display: flex; /* or inline-flex */
  flex-direction: row;
  flex-wrap: wrap;
}

• You can shorthand the direction and wrap:
  • flex-flow: direction wrap

---

JUSTIFYing the content:

justify-content: center;

• Accepts one of the following arguments:
  • flext-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly

---

ALIGNing items

align-items: flex-start;

• Accepts one of the following:
  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

---

Aligning content when there is extra space (for when items span multiple lines)

align-content: center;

• Accepts one of the following:
  • flex-start
  • flex-end
  • center
  • stretch
  • space-between
  • space-around

---

Properties for the children

• order: can specify where in the container you can place items

.item {
  order: integer
}

• flex-grow: defines how an item can grow if necessary (negative numbers are invalid)

.item {
  flex-grow: number /* default 0 */
}

• flex-shrink: defines how an item can shrink

.item {
  flex-shrink: number /* default 1 */
}

IE 10 Tips

• For flexbox poly fill for certain flexbox properties

// Using flex-grow polyfill
-ms-flex-positive: 2;
flex-grow: 2;