Flexbox

      

/** @define utilities */

/* Applies to flex container ========================================================================== */

/**

  • Container */

.u-flex { display: flex !important; }

.u-flexInline { display: inline-flex !important; }

/**

  • Direction: row */

.u-flexRow { flex-direction: row !important; }

.u-flexRowReverse { flex-direction: row-reverse !important; }

/**

  • Direction: column */

.u-flexCol { flex-direction: column !important; }

.u-flexColReverse { flex-direction: column-reverse !important; }

/**

  • Wrap */

.u-flexWrap { flex-wrap: wrap !important; }

.u-flexNoWrap { flex-wrap: nowrap !important; }

.u-flexWrapReverse { flex-wrap: wrap-reverse !important; }

/**

  • Align items along the main axis of the current line of the flex container */

.u-flexJustifyStart { justify-content: flex-start !important; }

.u-flexJustifyEnd { justify-content: flex-end !important; }

.u-flexJustifyCenter { justify-content: center !important; }

.u-flexJustifyBetween { justify-content: space-between !important; }

.u-flexJustifyAround { justify-content: space-around !important; }

/**

  • Align items in the cross axis of the current line of the flex container
  • Similar to justify-content but in the perpendicular direction */

.u-flexAlignItemsStart { align-items: flex-start !important; }

.u-flexAlignItemsEnd { align-items: flex-end !important; }

.u-flexAlignItemsCenter { align-items: center !important; }

.u-flexAlignItemsStretch { align-items: stretch !important; }

.u-flexAlignItemsBaseline { align-items: baseline !important; }

/**

  • Aligns items within the flex container when there is extra
  • space in the cross-axis
  • Has no effect when there is only one line of flex items. */

.u-flexAlignContentStart { align-content: flex-start !important; }

.u-flexAlignContentEnd { align-content: flex-end !important; }

.u-flexAlignContentCenter { align-content: center !important; }

.u-flexAlignContentStretch { align-content: stretch !important; }

.u-flexAlignContentBetween { align-content: space-between !important; }

.u-flexAlignContentAround { align-content: space-around !important; }

/**

/* postcss-bem-linter: ignore */

.u-flex > , .u-flexInline > * { flex-shrink: 1; / 1 */ }

/* Applies to flex items ========================================================================== */

/**

  • Override default alignment of single item when specified by align-items */

.u-flexAlignSelfStart { align-self: flex-start !important; }

.u-flexAlignSelfEnd { align-self: flex-end !important; }

.u-flexAlignSelfCenter { align-self: center !important; }

.u-flexAlignSelfStretch { align-self: stretch !important; }

.u-flexAlignSelfBaseline { align-self: baseline !important; }

.u-flexAlignSelfAuto { align-self: auto !important; }

/**

  • Change order without editing underlying HTML */

.u-flexOrderFirst { order: -1 !important; }

.u-flexOrderLast { order: 1 !important; }

.u-flexOrderNone { order: 0 !important; }

/**

  • Specify the flex grow factor, which determines how much the flex item will
  • grow relative to the rest of the flex items in the flex container.
  • Supports 1-5 proportions
    1. Provide all values to avoid IE10 bug with shorthand flex
  • Use 0% to avoid bug in IE10/11 with unitless flex basis. Using this
  • instead of auto as this matches what the default would be with flex
  • shorthand - http://git.io/vllWx */

.u-flexGrow1 { flex: 1 1 0% !important; /* 1 */ }

.u-flexGrow2 { flex: 2 1 0% !important; }

.u-flexGrow3 { flex: 3 1 0% !important; }

.u-flexGrow4 { flex: 4 1 0% !important; }

.u-flexGrow5 { flex: 5 1 0% !important; }

/**

.u-flexExpand { margin: auto !important; }

.u-flexExpandLeft { margin-left: auto !important; }

.u-flexExpandRight { margin-right: auto !important; }

.u-flexExpandTop { margin-top: auto !important; }

.u-flexExpandBottom { margin-bottom: auto !important; }

Flexbox Menu

Flexbox Card

1
2
3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sudoku

Animate

Left
Right

Conditional

CANCEL
or
SAVE