GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → spritejs → Sprite Flex Layout

spritejs / Sprite Flex Layout

Licence: mit
grid-layout is a layout engine which implements flex, can use in canvas/node-canvas

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

flexboxflex

Projects that are alternatives of or similar to Sprite Flex Layout

Waffle Grid
An easy to use flexbox grid system.
Stars: ✭ 602 (+3913.33%)
Mutual labels:  flex, flexbox
Core Layout
Flexbox & CSS-style Layout in Swift.
Stars: ✭ 215 (+1333.33%)
Mutual labels:  flex, flexbox
React Flexa
Responsive React Flexbox (CSS Flexible Box Layout Module) grid system based heavily on the standard CSS API.
Stars: ✭ 120 (+700%)
Mutual labels:  flex, flexbox
Infinity Css Grid
Fluid Flex Solution for making infinite grid columns.
Stars: ✭ 112 (+646.67%)
Mutual labels:  flex, flexbox
React Three Flex
💪📦 Flexbox for react-three-fiber
Stars: ✭ 764 (+4993.33%)
Mutual labels:  flex, flexbox
Flex.css
flex.css is declarative layout which is compatible with wechat, UC, webview and other main-stream mobile browser and surpports react, vue, angular.
Stars: ✭ 1,537 (+10146.67%)
Mutual labels:  flex, flexbox
Flexulator
A visual flexbox space distribution calculator
Stars: ✭ 171 (+1040%)
Mutual labels:  flex, flexbox
Flexy
Flexy is minimal CSS framework made with Flex
Stars: ✭ 114 (+660%)
Mutual labels:  flex, flexbox
react-styled-flexbox
A Flexbox React component harnessing the power of styled-components
Stars: ✭ 30 (+100%)
Mutual labels:  flex, flexbox
sass-flexbox
Manage Flexbox in Sass easily.
Stars: ✭ 40 (+166.67%)
Mutual labels:  flex, flexbox
Lbrnmeituan
ReactNative 仿美团项目
Stars: ✭ 84 (+460%)
Mutual labels:  flex, flexbox
Katana
Katana is CSS Layout System made with Flexbox
Stars: ✭ 57 (+280%)
Mutual labels:  flex, flexbox
Flexible Grid
Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)
Stars: ✭ 154 (+926.67%)
Mutual labels:  flex, flexbox
flexboxes
CSS flexbox framework with pure flexbox grid ability
Stars: ✭ 27 (+80%)
Mutual labels:  flex, flexbox
flexui
A light UI for C++ with XML and CSS support
Stars: ✭ 21 (+40%)
Mutual labels:  flex, flexbox
React Flexview
A powerful React component to abstract over flexbox and create any layout on any browser
Stars: ✭ 276 (+1740%)
Mutual labels:  flex, flexbox
Flex Layout Attribute
HTML layout helper based on CSS flexbox specification —
Stars: ✭ 705 (+4600%)
Mutual labels:  flexbox
Anythingpull
下拉刷新，上拉加载，支持弹性，顶部固定，层级，抽屉等等，扩展性强
Stars: ✭ 22 (+46.67%)
Mutual labels:  flex
React Cnode
基于webpack + react + react-router + redux + less + flex.css + ES6 的React版cnode社区
Stars: ✭ 688 (+4486.67%)
Mutual labels:  flex
Flex Cheatsheet
📖 Flexbox cheatsheet
Stars: ✭ 850 (+5566.67%)
Mutual labels:  flexbox
View All Similar Projects ➔

sprite-flex-layout

FlexLayout for SpriteJS

Install

npm install sprite-flex-layout

How to use

import {Node} from 'sprite-flex-layout';
const container = Node.create({
  width: 500,
  height: 500,
  flexDirection: 'row'
});
const node1 = Node.create({
  width: 100,
  height: 100
})
const node2 = Node.create({
  width: 100,
  height: 100
});

container.appendChild(node1);
container.appendChild(node2);

container.calculateLayout();
const layout = container.getAllComputedLayout();
console.log(layout);

support properties

flex container

  • flexDirection, support row | row-reverse | column | column-reverse, default is row
  • flexWrap , support nowrap | wrap | wrap-reverse, default is nowrap
  • flexFlow, <‘flex-direction’> || <‘flex-wrap’>
  • alignItems, support stretch | flex-start | flex-end | center, default is stretch, not support baseline
  • alignContent, support stretch | flex-start | flex-end | center | space-between | space-around | space-evenly, default is stretch
  • justifyContent , support flex-start | flex-end | center | space-between | space-around | space-evenly, default is flex-start
  • height, container height, <length>
  • width, container width, <length>

flex items

  • flex , [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
  • alignSelf, support auto | stretch | flex-start | flex-end | center, default is auto. not support baseline
  • flexShrink , <Number>
  • flexBasis , <Number>
  • flexGrow , <Number>
  • maxHeight , support <length> | <percentage>
  • maxWidth , support <length> | <percentage>
  • minHeight , support <length> | <percentage>
  • minWidth , support <length> | <percentage>
  • border, support [borderTop, borderRight, borderBottom, borderLeft]
  • borderTop , support <length>
  • borderRight , support <length>
  • borderBottom , support <length>
  • borderLeft , support <length>
  • height , support <length> | <percentage>
  • width , support <length> | <percentage>
  • margin , support [marginTop, marginRight, marginBottom, marginLeft]
  • marginTop , support <length> | <percentage>
  • marginRight , support <length> | <percentage>
  • marginBottom , support <length> | <percentage>
  • marginLeft , support <length> | <percentage>
  • padding, support [paddingTop, paddingRight, paddingBottom, paddingLeft]
  • paddingTop , support <length> | <percentage>
  • paddingRight , support <length> | <percentage>
  • paddingBottom , support <length> | <percentage>
  • paddingLeft, support <length> | <percentage>
  • boxSizing, support content-box | border-box, default is content-box
  • offsetWidth, set offset width of flex item
  • offsetHeight , set offset height of flex item
  • order, set flex items order
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].