/* ----------------------------------------- */
/*  Flexbox                                  */
/* ----------------------------------------- */

.flexrow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;

  > * {
    flex: 1;
  }

  .flex1 {
    flex: 1;
  }
  .flex2 {
    flex: 2;
  }
  .flex3 {
    flex: 3;
  }
  .flex4 {
    flex: 4;
  }
}

.flexcol {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

  > * {
    flex: 1;
  }

  .flex1 {
    flex: 1;
  }
  .flex2 {
    flex: 2;
  }
  .flex3 {
    flex: 3;
  }
  .flex4 {
    flex: 4;
  }
}

.flex-center {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.flex-between {
  justify-content: space-between;
}