Socket
Socket
Sign inDemoInstall

evokit-flex

Package Overview
Dependencies
7
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

evokit-flex

The block for building flexible layouts


Version published
Maintainers
1
Weekly downloads
1,098
decreased by-21.57%

Weekly downloads

Readme

Source

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 nameDefault valuePossible valueDescription
flex-content *startstart end center between around stretchSpace between flex lines on the cross axis
flex-directionrowrow row-reverse column column-reverseDirection of all items
flex-displayflexflex inline-flex noneDisplay type
flex-heightautoauto inherit 1-1Set the height
flex-itemsstartstart end center baseline stretchAlignment of all items on the cross axis
flex-wrapwrapnowrap wrap wrap-reverseWrap rules

<Flex.Item />

Prop nameDefault valuePossible valueDescription
flex-item-alignstartstart end center baseline stretchAlignment item on the cross axis
flex-item-displayblockblock noneDisplay type
flex-item-emptynullhiddenHide if contain either nothing or only an HTML comment.
flex-item-ordernull0 1 2 3 4 5 6 7 8 9 10Set 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-contentflex-content-alignflex-content-justify
align-contentalign-contentjustify-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>

Keywords

FAQs

Last updated on 24 Oct 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc