flexi.css

.element {
  position: relative;
}

/**
 * Screen: Create a wrapper around all of the content of a web page.
 */

.screen {
  composes: element;
  display: block;
  min-height: 100vh;
  width: 100%;
}

/**
 * Fill: Take up all the available height and width within its container.
 */

.fill {
  composes: element;
  display: flex;
  flex-direction: row;
  flex: 1 0 auto;
  flex-wrap: wrap;
  min-height: 100%;
  min-widht: 100%;
}

.fill--box {
  display: block;
  flex: none;
  height: 100%;
  min-height: 100%;
  position: absolute;
  width: 100%;
}

/**
 * Centered: Center its content within the available space.
 */

.centered {
  composes: element;
  align-items: center;
  display: flex;
  flex: 1 0 auto;
  justify-content: center;
}

/**
 * Box: Relatively positioned flex box which by default will grow to match other
 * items but will not expand to fill remaining space.
 */

.box {
  composes: element;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
}

/**
 * HBox: Relatively positioned flex box which will expand to fill remaining
 * space and will align its items horizontally
 */
.hbox {
  composes: element;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1 0 auto;
}

/**
 * VBox: Relatively positioned flex box which will expand to fill remaining
 * space and will align its items vertically.
 */
.vbox {
  composes: element;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}