- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Flex Grid SASS Reference
Description
SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS and saves time.
Mixins
The final CSS output is built using the mixin. The mixin can be used to build your own class structure out of these components. Following are the mixins used to build the final CSS output.
flex-grid-row
A Container is created for flex grid row, using this mixin.
@include flex-grid-row($behavior, $width, $columns, $base) { }
Sr.No. | Name & Description | Type | Default Value |
---|---|---|---|
1 |
$behavior The default grid style is modified. |
Keyword or List | null |
2 |
$width Maximum width of row. |
Number | $grid-row-width |
3 |
$columns Sets number of columns for this row. |
Keyword or List | null |
4 |
$base It is useful for calling mixin twice on the same element as it creates duplicate output. |
Boolean | true |
flex-grid-column
Flex grid columns are created using the mixin. Using unstack class on the parent flex row, the column can be stretched to the full width of the container.
@include flex-grid-column($columns, $gutter);
Sr.No. | Name & Description | Type | Default Value |
---|---|---|---|
1 |
$columns flex-grid-column() function is referred for the available values. |
Mixed | Null |
2 |
$gutter Create space between the columns |
Number | $grid-column-gutter |
flex-grid-order
The source of flex grid column is changed. The lowest column number appears at first in the layout.
@include flex-grid-order($order);
Sr.No. | Name & Description | Type | Default Value |
---|---|---|---|
1 |
$order Apply order number. |
Number | 0 |
Functions
The following is the function of a flex grid −
flex-grid-column
flex property is calculated for the flex gird column. The same value is accepted as basic grid-column() function along with the following parameters −
null − Expands the column to full space.
shrink − Contracts the column.
flex-grid-column($columns)
Sr.No. | Name & Description | Type | Default Value |
---|---|---|---|
1 |
$columns Set the particular column width. |
Mixed | null |
To Continue Learning Please Login
Login with Google