react-toolbox/source/styles/modules/flexbox.styl

62 lines
1.3 KiB
Stylus

/*
@todo
*/
[data-flex]
display-flex()
body&
position : absolute
left : 0
top : 0
bottom : 0
width : 100%
overflow : hidden
// -- Direction
[data-flex^="horizontal"]
flex-direction row
[data-flex^="vertical"]
flex-direction column
// -- Size
[data-flex*="grow"]
> *:not([data-column]):not([data-flex-grow])
flex-grow 1
[data-flex-grow="min"]
flex-grow 0
[data-flex-grow="max"]
flex-grow 2
// -- Container properties
[data-flex*="wrap"]
flex-wrap wrap
[data-flex*="center"]
justify-content center
align-content center
align-items center
[data-flex-justify="start"]
justify-content flex-start
[data-flex-justify="center"]
justify-content center
[data-flex-justify="end"]
justify-content flex-end
[data-flex-content="start"]
align-content flex-start
[data-flex-content="center"]
align-content center
[data-flex-content="end"]
align-content flex-end
[data-flex-items="center"]
align-items center
[data-flex-items="start"]
align-items flex-start
[data-flex-items="end"]
align-items flex-end
// -- Children properties
[data-flex-order="first"]
order: -1
[data-flex-order="last"]
order: 999999