https://github.com/sircus/components-flex
Deprecated
https://github.com/sircus/components-flex
Last synced: about 1 year ago
JSON representation
Deprecated
- Host: GitHub
- URL: https://github.com/sircus/components-flex
- Owner: sircus
- Created: 2015-06-16T18:05:51.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2015-10-30T14:21:31.000Z (over 10 years ago)
- Last Synced: 2025-04-13T09:12:16.594Z (about 1 year ago)
- Language: CSS
- Homepage:
- Size: 137 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# sircus-components-flex
[](https://www.npmjs.com/package/sircus-components-flex)
## Installation
> npm:
```bash
$ npm install sircus-components-flex sircus-tools-display sircus-tools-width
```
## Usage
> cssnext:
input.css
```css
@import "sircus-components-flex";
@import "sircus-tools-display";
@import "sircus-tools-width";
```
> sass:
input.scss
```scss
@import "./node_modules/sircus-components-flex/converted";
@import "./node_modules/sircus-tools-display/converted";
@import "./node_modules/sircus-tools-width/converted";
```
> Markup
```html
1
2
3
4
```
> Responsive
```html
```
> Modifier
```css
.Flex--nowrap { flex-wrap: nowrap; }
.Flex--center { justify-content: center; }
.Flex--right { justify-content: flex-end; }
.Flex--left { justify-content: flex-start; }
.Flex--justify { justify-content: space-between; }
.Flex--top { align-items: flex-start; }
.Flex--middle { align-items: center; }
.Flex--bottom { align-items: flex-end; }
.Flex--baseline { align-items: baseline; }
/* child */
.Flex-col--fit { flex: 1; }
.Flex-col--first { order: -1 }
.Flex-col--last { order: 9999 }
```
## Contributing
We Need Your Help!
## License
Released under the [MIT](https://github.com/sircus/license/blob/master/LICENSE) license.