Flex Box

info

Adding the z-index to an element only has an effect, if the position property with a value different from static was applied to this element.

warning

One of the exceptions of the above behaviour is flexbox. Applying the z-index to flex-items (so the elements inside of the flex-container) will change the order of these items even if no position property was applied.

Flex
Flex - Shorthand

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  align-content: normal;
}

.flex-container {
  display: flex;
  /* 
    flex-flow: flex-direction flex-wrap;
  */
  flex-flow: row nowrap;
  align-items: stretch;
  justify-content: flex-start;
  align-content: normal;
}

Flex
Flex - Shorthand

.item-6 {
  background: #d3c0b1;
  color: white;
  padding: 10px;
  width: 210px;
  order: 0;
  /* 'order below 0' will be placed at the beging & `order above 1` will be placed at the end */
  flex-grow: 0;
  flex-shrink: 1;
  /* If `flex-shrink: 1;` item won't shrink */
  /* flex-basis: auto | content | <width> | <height>; */
  flex-basis: auto;
  /* flex: flex-grow flex-shrink flex-basis; */
  flex: 0 1 auto;
}

.item-6 {
  background: #d3c0b1;
  color: white;
  padding: 10px;
  width: 210px;
  order: 0;
  /* flex: flex-grow flex-shrink flex-basis; */
  flex: 0 1 auto;
}

Flex Basis

flex-basis is based on the main axis.
- If flex-direction: row;, flex-basis will be replace the width of the element (X - axis).
- If flex-direction: column;, flex-basis will be replaced the height of the element (Y - axis).

GitHub Repo​

GitHub Repo