Flexbox: CSS Notes

Item Spacing

The following example adds a 5px gutter between the flexbox items. In order to use a negative margin on all sides of the flexbox container, it’s width must be set to auto (= default). An additional container element is required to set a width.

.container {
  width: 600px;
}

.wrapper {
  display: flex;
  margin: -5px;
}

.item {
  margin: 5px;
}

Bugs

IE 11

• Flex item images overflowing container: Set flex item to display flex and set the image and intermediate containers to max-width 100%.
• Try using flex-grow, -shrink and -basis seperately instead of flex-flow.
• Remove the –ms-flex-pack property, added by autoprefixer.