EvoKit - Flex
The block for building flexible layouts. Contains two elements <Flex>
and <FlexItem>
Install
Peer dependencies evokit. More about install
npm install evokit-flex --save
Usage
More about usage. You can also use <Flex.Item>
instead of <FlexItem>
import React from 'react';
import { Flex, FlexItem } from 'evokit-flex';
import 'evokit-flex/style.css';
const App = () => (
<Flex flex-content='center'>
<FlexItem>...</FlexItem>
</Flex>
);
Props
Also supports other valid props of the React Element. More about use props
<Flex />
Prop name | Default value | Possible value | Description |
---|
flex-content * | start | start end center between around stretch | Space between flex lines on the cross axis |
flex-direction | row | row row-reverse column column-reverse | Direction of all items |
flex-display | flex | flex flex-inline none | Display type |
flex-items | start | start end center baseline stretch | Alignment of all items on the cross axis |
flex-tag | div | HTML tags | HTML tag |
flex-wrap | wrap | nowrap wrap wrap-reverse | Wrap rules |
<FlexItem />
*
— prop has advanced params
Customize
This set of css variables is default, if you want to override one or more value, please use the rules css-variable-usage, define them below the css import.
@custom-media --ek-flex-media-small only screen and (min-width: 480px);
@custom-media --ek-flex-media-medium only screen and (min-width: 768px);
@custom-media --ek-flex-media-large only screen and (min-width: 960px);
@custom-media --ek-flex-media-wide only screen and (min-width: 1200px);
@custom-media --ek-flex-media-huge only screen and (min-width: 1400px);
Live demo
flex-tag
Default value div
<Flex flex-tag='div'>
...
</Flex>
flex-display
<Flex flex-display='flex-inline'>
...
</Flex>
flex-items
start
- The cross-start margin edges of the flex items are flushed with the cross-start edge of the lineend
- The cross-end margin edges of the flex items are flushed with the cross-end edge of the linecenter
- The flex items' margin boxes are centered within the line on the cross-axisbaseline
- All flex items are aligned such that their flex container baselines alignstretch
- Flex items are stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints
<Flex flex-items='center'>
...
</Flex>
flex-content
Advanced props
flex-content-align
flex-content-justify
Multi values (set value separated by a space)
List of values
start
- Lines are packed toward the start of the flex containerend
- Lines are packed toward the end of the flex containercenter
- Lines are packed toward the center of the flex containerbetween
- Lines are evenly distributed in the flex container. If the leftover free-space is negative or there is only a single flex line in the flex container, this value is identical to flex-startaround
- Lines are evenly distributed in the flex container, with half-size spaces on either endstretch
- Lines stretch to take up the remaining space
flex-content | flex-content-align | flex-content-justify |
---|
| | |
flex-direction
row
- The flex container’s main axis has the same orientation as the inline axis of the current writing moderow-reverse
- Same as row, except the main-start and main-end directions are swappedcolumn
- The flex container’s main axis has the same orientation as the block axis of the current writing modecolumn-reverse
- Same as column, except the main-start and main-end directions are swapped
<Flex flex-direction='column'>
...
</Flex>
flex-wrap
nowrap
- The flex container is single-linewrap
- The flex container is multi-linewrap-reverse
- Same as wrap, except the directions are swapped
<Flex flex-wrap='wrap'>
...
</Flex>
flex-item-tag
Default value div
<Flex>
<FlexItem flex-item-tag='div'>
...
</FlexItem>
</Flex>
flex-item-align
start
- The cross-start margin edges of the flex item are flushed with the cross-start edge of the lineend
- The cross-end margin edges of the flex item are flushed with the cross-end edge of the linecenter
- The flex item' margin boxes are centered within the line on the cross-axisbaseline
- All flex item are aligned such that their flex container baselines alignstretch
- Flex item are stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints
<Flex flex-item-align='center'>
...
</Flex>
flex-item-display
block
- shown as blocky (default)none
- remove block from document
<Flex>
<FlexItem flex-item-display='none'>
...
</FlexItem>
</Flex>
flex-item-order
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
- only affects the visual order
<Flex>
<FlexItem flex-item-order='2'>
...
</FlexItem>
</Flex>