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;
}
/**
- Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
*/
/* 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
- 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;
}
/**
- Aligning with
auto
margins
- http://www.w3.org/TR/css-flexbox-1/#auto-margins
*/
.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 Card
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.