Flex (l--flex)

l--flex は、コンテンツを Flex レイアウトで配置するためのクラスです。

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>

↓

flexプロパティの使用例

Flex Content

リサイズ

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

↓

子要素のflexプロパティの使用例

Flex Content

リサイズ

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