/** Flex helpers
 *
 *  These classes are designed to avoid boilerplate classes such as
 *  .some-element {
 *    display: flex
 *    flex-direction: row
 *  }
 *
 * Usage is intended for simple cases only. Use custom classes for more complex flex-layouts
 */

/**
 * Aligns children in a row
 *
 * example:
 * |--|------|-|
 */
.flex-row {
  display: flex;
  flex-direction: row;
}

/**
 * Aligns children in a column
 *
 * example:
 * |--|
 * |------|
 * |-|
 */
.flex-column {
  display: flex;
  flex-direction: column;
}

/**
 * Makes a child grow bigger, relative to other items
 * before:
 * |---x---|--y--|---x---|
 * after flex-grow is applied to the y-element:
 * |---x---|------y------|---x---|
 */
.flex-grow {
  flex-grow: 1;
}

/**
 * justifies (places the item on their main axis) items so that the space
 * between the items is maxed. This is useful, for example, when two items
 * need to be placed at opposite ends (for example left and right or top and bottom)
 *
+ The main axis is dependent on the flex direction
 * - flex-direction = row    : main axis is x-axis
 * - flex-direction = column : main axis is y-axis
 *
 * example assuming flex-direction = row
 *
 * Without justify-space-between:
 * | ----- | ----- |                |
 *
 * With justify-space-between:
 * | ----- |                | ----- |
 */
.justify-space-between {
  justify-content: space-between;
}

/**
 * Justifies (places the items on their main axis) items so that they are 
 * centered along the main axis. This is useful, for example, when you want
 * to place all items equidistantly from the center of the container.
 *
 * + The main axis is dependent on the flex direction
 * - flex-direction = row    : main axis is x-axis
 * - flex-direction = column : main axis is y-axis
 *
 * Example assuming flex-direction = row:
 *
 * Without justify-content-center:
 * | ----- | ----- |                |
 *
 * With justify-content-center:
 * |                -----  -----    |
 */
.justify-content-center {
  justify-content: center;
}

/**
 * aligns the items (i.e. places the items on the non main axis)
 */
.align-start {
  align-items: start;
}

/**
 * aligns the items (i.e. places the items on the non main axis)
 */
.align-center {
  align-items: center;
}

/**
 * aligns the items (i.e. places the items on the non main axis)
 */
.align-baseline {
  align-items: baseline;
}

/**
 * aligns the items (i.e. places the items on the non main axis)
 */
.align-end {
  align-items: flex-end;
}

.align-self-end {
  align-self: end;
}

/**
 * justifies the items (i.e. places the items on the main axis)
 */
.justify-center {
  justify-items: center;
}

/**
 * Allows items to wrap to the next row when there are too many to fit
 * onto one row
 */
.flex-wrap {
  flex-wrap: wrap;
}

/**
 * justifies and aligns the items of an outer element to the center position
 */
.place-center {
  place-items: center;
}

.flex-grow-1-3 {
  flex-grow: 0.3;
}
