Flexbox
Flexbox Playground | Mixin Documentation
Things to remember:
- Flexed items in the same row will all become the same height as the tallest item (no need for .heightEQ).
- This also means that if grid items wrap, they potentially won’t be the same height as the items above. Look at the below examples to see visually how it renders.
- This works on slick sliders (!), just declare @include flexbox(); on the slider element.
- You can flex a flexed item. For example, using the @includes flexbox(); on a grid item will allow to you have control over the interior of the grid. This allows you to easily center content as needed horizontally, vertically, or both (see Children examples)
- Flexbox works IE 10+ but there are compatibility issues with 10 and 11 (See troubleshooting).
Troubleshooting:
- If your flex child (grid item) is an <a> tag it needs to either be declared a block element or an inline block element. This is a layout issue within IE 10 and 11 with inline <a> elements.
- If you are applying a flex to a child that is being flexed by the parent you need to apply the @include flex(); mixin to it (child). There is a layout issue with IE 10 and 11 that allows the child element in this situation to extend beyond the boundaries of the parent.
Menu:
Structure:
Extra Options:
Base Styles
Parent div: .flex-row
Applied mixins:
- @include flexbox();
- @include flex-wrap( wrap );
- @include justify-content( center );
Layout (grid)
Parent div: .flex-row
Child element(s): .grid-*
Layout (box-grid)
Parent div: .flex-row .grid-* (auto responsive)
.flex-row .grid-6
.flex-row .grid-4
.flex-row .grid-3
.flex-row .grid-2
Row Examples
Row: Left Aligned
Parent div: .flex-row
Applied mixins:
- @include justify-content( flex-start );
Row: Right Aligned
Parent div: .flex-row
Applied mixins:
- @include justify-content( flex-end );
Row: No Wrap
Parent div: .flex-row
Applied mixins:
- @include flex-wrap( nowrap );
Notes: Grid will no longer wrap. Applied width will only extend to max width of parent
Row: Reverse
Parent div: .flex-row
Applied mixins:
- @include flex-direction( row-reverse );
Notes: reverse grid items
Column Examples
Column
Parent div: .flex-row .column .grid-3
Applied mixins:
- @include flex-direction( column );
- @include align-items( center );
Notes: Display grid items in a column instead of a row. Grid items no longer have same height applied (only applies to row)
Column: Reverse
Parent div: .flex-row .column-reverse .grid-6
Applied mixins:
- @include flex-direction( column-reverse );
- @include align-items( center );
Children Examples: Flex-ception
Flex a flex.
Parent div: .flex-grid (example)
- Default
- @include align-self( center )
- @include align-self( flex-start )
- @include align-self( flex-end )
Notes: Flexed children will become the height of its parent by default.
Center flexed items
Parent div: .flex-grid (example)
- @include justify-content( center );
Notes: center a flexed item
Misc. Examples:
Centering
- The image is the tallest item so the grid holding the content is automatically the same height as the grid holding the image.
- Both grids are children of a flexed container (.flex-row) so they have their own behaviors.
-
Applying this mixin on the content grid centers it with the image
@include align-self( center );
Before
Lorem ipsum dolor sit amet.
After
Lorem ipsum dolor sit amet.
Re-ordering
- You can reorder any child item within a flexed parent
- Useful for certain designs on breakpoints where responsive views wraps HTML in undesirable ways
- All items need an ordering applied for a re-ordering to take place
-
Use this mixin to reorder flexed children however you want
@include order( 1 ); and so on... @include order( 2 ), @include order( 3 ), etc.
Before
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Default Wrapping
After
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Altered Ordering
Before
After
Precise Spacing
- Applying flexbox to a parent container eliminates text nodes that create gutters between inline-block elements. You can retain the inline-block style without having to declare items inline to remove nodes.
Create Your Own Grid
Parent div: .flex-row
- .media-grid
- width: 35%;
- margin-right: 5%;
- .content-grid
- width: 60%;
- @include align-self( center );
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut dolor et risus cursus porta. Nullam tincidunt pretium mauris. Maecenas eu orci a magna eleifend tristique finibus a turpis. Nullam non augue dolor. Cras ac arcu sapien. In malesuada et eros nec efficitur. Morbi facilisis, eros quis sagittis gravida, leo eros tempor lorem, a congue tortor dolor et dui. Aliquam porta malesuada tortor a cursus. Aliquam erat volutpat. Quisque non tellus lorem. Aliquam condimentum finibus facilisis. Sed tempus tristique mattis. Pellentesque lobortis velit at sapien ornare semper.