Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

evokit-flex

Package Overview
Dependencies
0
Maintainers
1
Versions
7
Issues
File Explorer

Advanced tools

evokit-flex

The block for building flexible layouts

    3.2.1latest

Version published
Maintainers
1
Yearly downloads
13,134
decreased by-4.29%

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

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc