コンテンツにスキップ
Lism CSS

Flex

コンテンツをFlexレイアウトで配置するためのコンポーネントです。

CSS

Section titled “CSS”

Import

Section titled “Import”
import { Flex } from 'lism-css/react';

Props

Section titled “Props”
PropCSS
fxfflex-flow
fxwflex-wrap
fxdflex-direction

Usage

Section titled “Usage”
↓
<Flex>
Item
Item
Item
<Flex>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</Flex>
↓
flexプロパティの使用例
Flex Content
Flex Content
Flex Content
リサイズ可能 
<Flex fxw='wrap' jc='center' g='30'>
  <div>Flex Content</div>
  <div>Flex Content</div>
  <div>Flex Content</div>
</Flex>
↓
子要素のflexプロパティの使用例
Flex Content
Flex Content
リサイズ可能 
<Flex g='30'>
  <Lism fx='1'>Flex Content</Lism>
  <Lism fxb={['33%', '25%']}>Flex Content</Lism>
</Flex>