# flex-sass > The Flex CSS grid, written in SASS, and available to you in this package. Latest version **4.0.1** (published 2016-09-27) · WTFPL license · 0 weekly downloads ## Install ```sh npm install flex-sass pnpm add flex-sass yarn add flex-sass bun add flex-sass ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 4.0.1 | | Published | 2016-09-27 | | First published | 2016-02-15 | | Weekly downloads | 0 | | License | WTFPL | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Maintainers | rdgd | ## Links - npm: https://www.npmjs.com/package/flex-sass - Repository: https://github.com/rdgd/Flex - Homepage: https://github.com/rdgd/Flex#readme - Issues: https://github.com/rdgd/Flex/issues - npm.io page: https://npm.io/package/flex-sass ## Recent versions - 4.0.1 (latest) — 2016-09-27 - 4.0.0 — 2016-09-18 - 3.1.1 — 2016-04-18 - 3.1.0 — 2016-04-11 - 3.0.1 — 2016-04-11 - 3.0.0 — 2016-04-10 - 2.0.3 — 2016-02-15 - 2.0.2 — 2016-02-15 ## README
Flex flex-sass Flex
A CSS Grid which uses flexbox under the hood, and provides a simple CSS class-based API for rapidly building fluid/responsive webpage layouts on a 12 column grid. ### Get it `bower install Flex` or `npm install flex-sass` ### Base Classes #### Parent Container --- `.grid` Specifies an area in which a particular layout will be defined. Similar to the traditional ".row" class of the horizontal-only grids of yesteryear. Feel free to nest these as you wish, and it will behave as you might hope or expect. --- `.no-pad` Removes padding from the parent container and its children/items. --- `.inline` Displays as inline-flex instead of flex, which is block. --- `.wrap` If the number of specified cols in a parent container exceed 12, then the content will wrap instead of overflow. By default, the framework applies rules applied by this class, but it is exposed through the API regardless. --- `.wrap-reverse` Instead of the last element wrapping, the first element wraps, and then the second and so on. --- `.no-wrap` Forces overflow instead of wrapping items when they exceed 12 cols worth of space. --- `.reverse` Reverses the way flex-order is displayed. --- `.stack` Makes flex-direction "column" instead of "row". --- ``` .justify-center .justify-start .justify-end .justify-space-around .justify-space-between ``` Justifies the content in the container as indicated in the class name. --- ``` .align-baseline .align-center .align-start .align-end .align-stretch ``` Aligns the items in the container as indicated in the class name. --- #### Items The following classes apply **only** to elements which are **direct descendants** of a parent container which has the class `.grid` --- ``` .span-1 .span-2 .span-3 .span-4 .span-5 .span-6 .span-7 .span-8 .span-9 .span-10 .span-11 .span-12 ``` Specifies how many grid units the item will span, or its magnitude, on a given vector. For a given parent container the sum of all columns should be <= 12 or either wrapping or overflowing will occur. --- ``` .offset-1 .offset-2 .offset-3 .offset-4 .offset-5 .offset-6 .offset-7 .offset-8 .offset-9 .offset-10 .offset-11 .offset-12 ``` Specifies how many grid units the item should be offset from the left. Affects the sum total of grid units for a parent container. --- ``` .offset-1-right .offset-2-right .offset-3-right .offset-4-right .offset-5-right .offset-6-right .offset-7-right .offset-8-right .offset-9-right .offset-10-right .offset-11-right .offset-12-right ``` Specifies how many grid units the item should be offset from the right. Affects the sum total of grid units for a parent container. --- ``` .order-1 .order-2 .order-3 .order-4 .order-5 .order-6 .order-7 .order-8 .order-9 .order-10 .order-11 .order-12 ``` Specifies the order in which the item should appear rendered on the page, despite their top-down order in the document. All items have an order of 12 by default, so that if an order value < 12 is given to an item, by use of one of these classes, it will be respected. --- ``` .grow-1 .grow-2 .grow-3 .grow-4 .grow-5 .grow-6 .grow-7 .grow-8 .grow-9 .grow-10 .grow-11 .grow-12 ``` Specifies the velocity at which the item appears to grow relative to its sibling items. --- ``` .shrink-1 .shrink-2 .shrink-3 .shrink-4 .shrink-5 .shrink-6 .shrink-7 .shrink-8 .shrink-9 .shrink-10 .shrink-11 .shrink-12 ``` Specifies the velocity at which the item appears to shrink relative to its sibling items. --- ``` .align-auto .align-baseline .align-center .align-start .align-end .align-stretch ``` Overrides the default align-items attribute, which is specified by the `.align-` class on the parent container. --- ### Helpers --- `.block` Displays an element as block and gives 100% width. --- `.block-center` Displays an element as block and sets margin to auto so that the element is centered in its parent container. --- `.hide` Sets display to none. --- `.show-inline` Sets display to inline. --- `.show-block` Sets display to block. --- `.show-inline-block` Sets display to inline-block. --- `.text-left` Justifies contained text to the left. --- `.text-center` Justifies contained text to the center. --- `.text-right` Justifies contained text to the right. --- ### Breakpoints Breakpoints are based purely on viewport size. To target a specific viewport size, simply append '-xl', '-lg', '-md', 'sm', 'xs' to any base class or helper class. ###### `-xl` (max-width 1600px) ###### `-lg` (max-width 1280px) ###### `-md` (max-width 960px) ###### `-sm` (max-width 640px) ###### `-xs` (max-width 320px) ## Examples ### Simple responsive behavior Goal: When the viewport size becomes smaller than 640px, stack the elements in our grid container. By default Flex will wrap any grid items which exceed the size of the container, so we can simply allot a greater number of columns to different elements at different sizes. ```
``` If our grid parent has the `.no-wrap` class applied, we can still achieve this by indicating that we want the items in the grid to simply stack when the viewport is small using `.stack-sm` class. ```
``` ### Centering grid items Goal: We have two columns, one that spans 2 grid units and the other 3 grid units. We want them centered in the grid. Since there are an odd number of grid units we need to center in the page, we need to make the amount of space the content takes up even by adding one unit of offset to the second item. Since they will then take up 6 units of space, we have a remaining 6 units to distribute on either side, which is achieved by setting the offset of the first unit to 3 because there is just a remaining 3 units worth of space empty on the right side. ```
``` --- _Source: https://npm.io/package/flex-sass · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._