Flexbox

CSS Flexible Box Layout Module Level 1

What we do on this seminar?

• Problem?
• Introduction flexbox
• Playground
• References

Problem?

Old approach: Float

What we need?

• Alignment
• Direction
• Order
• Size

Flexbox

Flexbox is not a single property but a set of properties on the parent element and their children

What we need to know about Flexbox?

• Enable flexbox behaviors
• Ordering and orientation
• Alignment
• Flexibility
• Shorthand

Layout

Enable flex

.grid {
  display: flex; //inline-flex
}
            

Ordering & Orientation

• Flex direction
• Flex wrap
• Item order

.grid {
  ...
  flex-direction: row; //column, row-reverse, column-reverse
  flex-wrap: nowrap; // wrap
  ...
}

.grid_item {
  order: 1;
}
            

Alignment

• Justify content (main-axis)
• Align items (cross-axis)
• Align self (cross-axis)
• Align content

.grid {
  ...
  justify-content: flex-start; // flex-end, center, space-around, space-between
  align-items: flex-start; // flex-end, center, base-line, stretch
  ...
}

.grid_item {
  align-self: flex-start; // flex-end, center. base-line, stretch
}
            

Flexibility

• Flex grow
• Flex shrink
• Flex basis

.grid_item {
  ...
  flex-grow: 0; // >= 0 are valid
  flex-shrink: 0;
  flex-basis: auto; // 30%, 50%
  ...
}
            

Flex shorthand

• flex
• flex-flow

.grid_item {
  ...
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
  flex: 2;
  flex: 10px;
  flex: 2 2;
  flex: 2 30px;
  flex: 2 2 30px;
  flex: auto; // = 1 1 auto;
  flex: initial; // = 0 1 auto;
  flex: none; // = 0 0 auto;
  ...
}
.grid {
  ...
  flex-flow: <'flex-direction'> || <'flex-wrap'>;
  flex-flow: row;
  flex-flow: wrap;
  flex-flow: column-reverse wrap;
  ...
}
            

Auto margin