Saturday, February 18, 2017

Foundation - Flex Grid

The grid depends on the flex display property. It consist number of features that are available with the flexbox, like automatic stacking, source ordering, vertical alignment and horizontal alignment.

Browser Support

The flex grid is supported in Chrome, Firefox, Internet Explore 10+, Safari 6+, Android 4+ and iOS 7+.
Following table describes features of Flex Grid along with description.
S.N. Features & Description
1 Importing
It includes the export mixin for the flex grid to use the default CSS.
2 Basics
The Flex grid structure is similar to that of float grid.
3 Advanced Sizing
If the sizing class is not included in the column then it expands itself and fills the remaining space in the column.
4 Responsive Adjustments
If the explicit size of column in flex grid is not given then it will auto-size the columns
5 Column Alignment
The flex grid columns can be aligned horizontal or vertical axis in the parent row.
6 Source Ordering
Source ordering helps to rearrange the column in different size of screens.
7 Sass Reference
SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor which helps to reduce repetition with CSS and saves time.

No comments:

Post a Comment