MaxMilton/ekscss

/**
 * Flexbox utilities
 *
 * NOTE:
 *   Things that are shared between both flexbox and CSS grid are found in
 *   "_grid.css" because this framework prioritises CSS grid first.
 */

/**
 * Much of the time when using flexbox you really just want to vertically align
 * elements, so this class is a shortcut for that.
 */
.dfc {
  display: flex;
  align-items: center;
}
/**
 * Same as .dfc but for both vertical and horizontal alignment (centered).
 */
.dfcc {
  display: flex;
  align-items: center;
  justify-content: center;
}

.f-wrap { flex-wrap: wrap; }
.f-wrap-r { flex-wrap: wrap-reverse; }
.f-wrap-n { flex-wrap: nowrap; } /* default */

.f-col { flex-direction: column; }
.f-col-r { flex-direction: column-reverse; }
.f-row { flex-direction: row; }
.f-row-r { flex-direction: row-reverse; }

${x.fn.each(x.media, (bp, query) => xcss`
  @media ${query} {
    .${bp}-dfc {
      display: flex;
      align-items: center;
    }

    .${bp}-f-wrap { flex-wrap: wrap; }
    .${bp}-f-wrap-r { flex-wrap: wrap-reverse; }
    .${bp}-f-wrap-n { flex-wrap: nowrap; }

    .${bp}-f-col { flex-direction: column; }
    .${bp}-f-col-r { flex-direction: column-reverse; }
    .${bp}-f-row { flex-direction: row; }
    .${bp}-f-row-r { flex-direction: row-reverse; }
  }
`)}