Flex (l--flex)

l--flex is a class for arranging content using Flexbox.

CSS

.l--flex {
  display: flex;

  > * {
    min-width: 0;
  }
}

import { Flex } from 'lism-css/react';

↓

<Flex>

Item

<Flex>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</Flex>

↓

Using flex props

Flex Content

リサイズ可能

<Flex fxw="wrap" jc="center" g="20">
  <div>Flex Content</div>
  <div>Flex Content</div>
  <div>Flex Content</div>
</Flex>

↓

Using flex props on child elements

Flex Content

リサイズ可能

<Flex g="20">
  <Lism fx="1">Flex Content</Lism>
  <Lism fxb={['33%', '25%']}>Flex Content</Lism>
</Flex>