MAD9013

Flexbox

  • New value for the CSS display property
  • Used for aligning multiple elements along ONE axis
  • There are two main parts: flexbox containers and flexbox items
  • Getting Started with Flexbox video

Whenever you are adding display:flex to an element you are really just talking about how to position the children elements of that element.

Flexbox Container Properties

  • display: flex
  • flex-direction property can be row, row-reverse, column, column-reverse
  • justify-content property (along main axis) can be flex-start, flex-end, center, space-around, space-between and space-evenly
  • align-items (on cross-axis) can be flex-start, flex-end, center, stretch, baseline
  • flex-wrap can be wrap, no-wrap, wrap-reverse

Flexbox Item Properties

  • flex-basis initial size for an item
  • flex-grow controls the ratio for how items grow relative to each other
  • flex-shrink controls the ratio of how items shrink relative to each other
  • flex is a shorthand for flex-basis, flex-grow and flex-shrink
  • align-self to override container's align-items value for one item
  • order assign exact position of each item.
.container {
  /* this is the flexbox container */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.container .item {
  /* these are the flexbox items */
  flex-basis: auto;
  flex-grow: 0;
  /* these two will keep original content sizes */
  flex-basis: 0;
  flex-grow: 1;
  /* these two will start the items at width 0 and then expand them equally */
  flex-shrink: 1;
  /* shrink them equally as the width of the container is reduced */
}

More Resources

Last Updated: : 8/25/2019, 6:02:21 PM