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

Flex

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

CSS

Section titled “CSS”

Import

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

Props

Section titled “Props”

Flexはflexオブジェクト内で指定できるプロパティ をコンポーネントに直接指定できるようになっています。

PropCSS
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='20'>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</Flex>

variant: cluster

Section titled “variant: cluster”

複数の要素を横方向に連続的に並べて配置するレイアウトを作るためのバリエーションです。

variant="cluster"を指定すると .l--flex--cluster が追加で出力されます。
このクラスには下記のようなCSSが適用されています。

.l--flex--cluster{
  flex-wrap: wrap;
  align-items: center;
}
↓
シンプルな<Cluster>の例
Lorem ipsum
Dolor
Sit amet
Consectetur
Adipisicing
リサイズ可能 
<Flex variant='cluster' g='20'>
  <Lism bd px='10' bdrs='2'>Lorem ipsum</Lism>
  <Lism bd px='10' bdrs='2'>Dolor</Lism>
  <Lism bd px='10' bdrs='2'>Sit amet</Lism>
  <Lism bd px='10' bdrs='2'>Consectetur</Lism>
  <Lism bd px='10' bdrs='2'>Adipisicing</Lism>
</Flex>

Opt-in

Section titled “Opt-in”

CSSを追記することで実現できるバリエーション作成例を示します。

variant: ltr,rtl

Section titled “variant: ltr,rtl”

ltr言語でもrtl言語でも同じ方向に揃えたい時に使えるバリエーションです。

次のように、.l--flex--ltr、.l--flex--rtl のスタイルを用意します。

↓
以下のスタイルを追記
.l--flex--ltr {
  flex-direction: row;
}
.l--flex--rtl {
  flex-direction: row-reverse;
}


:where([dir='rtl']) {
  .l--flex--ltr {
    flex-direction: row-reverse;
  }
  .l--flex--rtl {
    flex-direction: row;
  }
}

これらのクラスがある時、dir="rtl"ではflex-directionが反転されるようになり、言語方向がどちらの場合でも、同じ方向で要素が配置できます。

ただし、rtl言語の場合にdir="rtl"を<html>等に指定し、明示しておく必要があります。

↓
ltr言語での標準動作
box-1
box-2
box-3 
<Flex variant='ltr' g='20'>
  <div>box-1</div>
  <div>box-2</div>
  <div>box-3</div>
</Flex>
↓
rtl言語での動作
صندوق-1
صندوق-2
صندوق-3 
<div dir="rtl">
  <Flex variant='ltr' g='20'>
    <div>صندوق-1</div>
    <div>صندوق-2</div>
    <div>صندوق-3</div>
  </Flex>
</div>