# @makay/flexbox > Tiny flexbox library. Latest version **3.0.0** (published 2018-09-24) · ISC license · 0 weekly downloads ## Install ```sh npm install @makay/flexbox pnpm add @makay/flexbox yarn add @makay/flexbox bun add @makay/flexbox ``` ## 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 | 3.0.0 | | Published | 2018-09-24 | | First published | 2017-04-08 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 24.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | Diogo Pais | | Maintainers | makay | ## Links - npm: https://www.npmjs.com/package/@makay/flexbox - Repository: https://github.com/Makay11/flexbox - Homepage: https://github.com/Makay11/flexbox#readme - Issues: https://github.com/Makay11/flexbox/issues - npm.io page: https://npm.io/package/@makay/flexbox ## Recent versions - 3.0.0 (latest) — 2018-09-24 - 2.0.1 — 2018-09-07 - 2.0.0 — 2018-09-06 - 1.0.4 — 2018-02-19 - 1.0.3 — 2018-01-28 - 1.0.2 — 2018-01-28 - 1.0.1 — 2018-01-28 - 1.0.0 — 2018-01-28 - 0.1.0 — 2017-04-08 ## README # @makay/flexbox [![npm (scoped)](https://img.shields.io/npm/v/@makay/flexbox.svg?style=flat-square)](https://www.npmjs.com/package/@makay/flexbox) [![license](https://img.shields.io/github/license/Makay11/flexbox.svg?style=flat-square)](http://opensource.org/licenses/ISC) Tiny flexbox library (1.65KB gzipped) to help you build responsive layouts quickly and without writing any CSS. Goals of this library: - To expose most of flexbox's properties as human-readable CSS classes. - To not change any properties of classes/elements outside the library. - To be able to be used alongside other CSS libraries and frameworks without breaking anything*. - To be as small as possible while still achieving all the previous goals. *\* There might be collisions with the class names of some libraries or frameworks (like Bootstrap's ".row"). If possible, exclude the grid systems offered by these as you will not be needing them anyway. If you really have to keep them, make sure this library is loaded after them and things might still work for the most part.* # What is flexbox? > Flexbox provides tools to allow rapid creation of complex, flexible layouts, and features that historically proved difficult with CSS. [[Source](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)] If you're unfamiliar with flexbox be sure to take a look at the following resources (in no specific order): - http://cssreference.io/flexbox/ - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox # Installation ## npm (recommended) Run `npm install @makay/flexbox` or `yarn add @makay/flexbox` to install the latest version. Include `node_modules/@makay/flexbox/flexbox.css` or `node_modules/@makay/flexbox/flexbox.min.css` in your bundle using your preferred bundler. ## CDN Include one of the following stylesheets in your page: https://cdn.jsdelivr.net/npm/@makay/flexbox@3.0.0/flexbox.css https://cdn.jsdelivr.net/npm/@makay/flexbox@3.0.0/flexbox.min.css # Documentation After installing the library, you can start using it by adding the classes listed below to the elements of your page. ## Container classes Class|CSS properties ---|--- row|display: flex;
flex-shrink: 0;
flex-direction: row; column|display: flex;
flex-shrink: 0;
flex-direction: column; ### Container modifiers Class|CSS properties ---|--- reverse|flex-direction: row-reverse;
**or**
flex-direction: column-reverse; shrink|flex-shrink: 1; wrap-reverse|flex-wrap: wrap-reverse; wrap|flex-wrap: wrap; nowrap|flex-wrap: nowrap; align-start|align-items: flex-start; align-center|align-items: center; align-end|align-items: flex-end; align-baseline|align-items: baseline; align-stretch|align-items: stretch; align-content-start|align-content: flex-start; align-content-center|align-content: center; align-content-end|align-content: flex-end; align-content-stretch|align-content: stretch; align-content-space-between|align-content: space-between; align-content-space-around|align-content: space-around; justify-start|justify-content: flex-start; justify-center|justify-content: center; justify-end|justify-content: flex-end; justify-space-between|justify-content: space-between; justify-space-around|justify-content: space-around; ## Child classes Class|CSS properties ---|--- *(any)*|max-width: 100%; align-self-auto|align-self: auto; align-self-start|align-self: flex-start; align-self-center|align-self: center; align-self-end|align-self: flex-end; align-self-baseline|align-self: baseline; align-self-stretch|align-self: stretch; flex-none|flex: none; flex|flex-grow: 1; flex-**X**|flex-basis: calc(**X***100%/12); ***X** can range from 1 to 12, inclusive.* ### Child media queries Class|max-width|CSS properties ---|---|--- flex-lg-**X**|1199px|flex-basis: calc(**X***100%/12); flex-md-**X**|991px|flex-basis: calc(**X***100%/12); flex-sm-**X**|767px|flex-basis: calc(**X***100%/12); flex-xs-**X**|575px|flex-basis: calc(**X***100%/12); ***X** can range from 1 to 12, inclusive.* ## Utility classes Class|CSS properties ---|--- padded|padding: 16px; hidden|display: none; ### Utility media queries Class|max-width|CSS properties ---|---|--- hidden-lg|1199px|display: none; hidden-md|991px|display: none; hidden-sm|767px|display: none; hidden-xs|575px|display: none; Class|min-width|CSS properties ---|---|--- hidden-gt-lg|1200px|display: none; hidden-gt-md|992px|display: none; hidden-gt-sm|768px|display: none; hidden-gt-xs|576px|display: none; # Contribute! Found an issue or want to add a new feature? Feel free to open an issue or make a pull request! --- _Source: https://npm.io/package/@makay/flexbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._