evokit-flex

3.2.1 • Public • Published

EvoKit - Flex

The block for building flexible layouts. Contains two elements <Flex> and <Flex.Item>


Install

Peer dependencies evokit. More about install

npm install evokit-flex --save

Usage

More about usage

import React from 'react';
import { Flex } from 'evokit-flex';
import 'evokit-flex/style.css';
 
const App = () => (
    <Flex flex-content='center'>
        <Flex.Item>...</Flex.Item>
    </Flex>
);

Edit flex-usage

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 inline-flex none Display type
flex-height auto auto inherit 1-1 Set the height
flex-items start start end center baseline stretch Alignment of all items on the cross axis
flex-wrap wrap nowrap wrap wrap-reverse Wrap rules

<Flex.Item />

Prop name Default value Possible value Description
flex-item-align start start end center baseline stretch Alignment item on the cross axis
flex-item-display block block none Display type
flex-item-empty null hidden Hide if contain either nothing or only an HTML comment.
flex-item-order null 0 1 2 3 4 5 6 7 8 9 10 Set the order

* — 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);

flex-display

<Flex flex-display='inline-flex'>
    ...
</Flex>

flex-items

  • start - The cross-start margin edges of the flex items are flushed with the cross-start edge of the line
  • end - The cross-end margin edges of the flex items are flushed with the cross-end edge of the line
  • center - The flex items' margin boxes are centered within the line on the cross-axis
  • baseline - All flex items are aligned such that their flex container baselines align
  • stretch - 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-items

<Flex flex-items='center'>
    ...
</Flex>

flex-content

Advanced props

  1. flex-content-align
  2. flex-content-justify

Multi values (set value separated by a space)

  • flex-content="{1} {2}"

List of values

  • start - Lines are packed toward the start of the flex container
  • end - Lines are packed toward the end of the flex container
  • center - Lines are packed toward the center of the flex container
  • between - 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-start
  • around - Lines are evenly distributed in the flex container, with half-size spaces on either end
  • stretch - Lines stretch to take up the remaining space
flex-content flex-content-align flex-content-justify
align-content align-content justify-content

flex-direction

  • row - The flex container’s main axis has the same orientation as the inline axis of the current writing mode
  • row-reverse - Same as row, except the main-start and main-end directions are swapped
  • column - The flex container’s main axis has the same orientation as the block axis of the current writing mode
  • column-reverse - Same as column, except the main-start and main-end directions are swapped

direction

<Flex flex-direction='column'>
    ...
</Flex>

flex-wrap

  • nowrap - The flex container is single-line
  • wrap - The flex container is multi-line
  • wrap-reverse - Same as wrap, except the directions are swapped

wrap

<Flex flex-wrap='wrap'>
    ...
</Flex>

flex-height

Set the height

  • auto - value: auto
  • inherit - value: inherit
  • 1-1 - value: 100%
<Flex flex-height='1-1'>
    ...
</Flex>

flex-item-align

  • start - The cross-start margin edges of the flex item are flushed with the cross-start edge of the line
  • end - The cross-end margin edges of the flex item are flushed with the cross-end edge of the line
  • center - The flex item' margin boxes are centered within the line on the cross-axis
  • baseline - All flex item are aligned such that their flex container baselines align
  • stretch - 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

align-self

<Flex flex-item-align='center'>
    ...
</Flex>

flex-item-display

  • block - shown as blocky (default)
  • none - remove block from document
<Flex>
    <Flex.Item flex-item-display='none'>
        ...
    </Flex.Item>
</Flex>

flex-item-order

  • 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 - only affects the visual order
<Flex>
    <Flex.Item flex-item-order='2'>
        ...
    </Flex.Item>
</Flex>

flex-item-empty

The <Flex.Item> will be hidden display: none that contain either nothing or only an HTML comment.

<Flex>
    <Flex.Item flex-item-empty='hidden'>
        {null}
    </Flex.Item>
</Flex>

Package Sidebar

Install

npm i evokit-flex

Weekly Downloads

1,070

Version

3.2.1

License

MIT

Unpacked Size

60.7 kB

Total Files

17

Last publish

Collaborators

  • docccdev