Flex

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

Import

import { Flex } from '@lism-ui/core';

Props

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

Prop	CSS
`fxw`	`flex-wrap`
`fxd`	`flex-direction`
`g`	`gap`
`rowg`	`row-gap`
`colg`	`column-gap`

Usage

↓

<Flex>

Item

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

↓

flexオプションの指定

Flex Content

リサイズ可能

<Flex fxw='wrap' jc='center' g='20'>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</Flex>

Flexの要素が横に飛び出してしまう場合の対処法

改行位置がない長い文字列があると、画面幅が狭い時に要素が外側へはみ出してしまうことがあります。

そのような場合は、原因となる要素に.-ovw:any（overflow-wrap: anywhere のユーティリティクラス）を付けてください。

↓

画面幅が狭い時に横にはみ出す例(resizeして確認してください)

LooooooooooooongStrinnnnnnnnnnngs!!!!

AAA

BBB

CCC

リサイズ可能

<Flex g='20'>
  <p>LooooooooooooongStrinnnnnnnnnnngs!!!!</p>
  <p>AAA</p>
  <p>BBB</p>
  <p>CCC</p>
</Flex>

↓

はみ出す原因となるテキストに -ovw:any を適用

LooooooooooooongStriiiinnnnnnnnnnngs!!!!

AAA

BBB

CCC

リサイズ可能

  <Flex g='20'>
    <Text ovw='any'>LooooooooooooongStriiiinnnnnnnnnnngs!!!!</Text>
    <Text>AAA</Text>
    <Text>BBB</Text>
    <Text>CCC</Text>
  </Flex>

variant: cluster

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

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

.l--flex--cluster{
  flex-wrap: wrap;
  align-items: baseline;
}

↓

シンプルな<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>

<div class="l--flex l--flex--cluster -g:20">
  <span class="-bd: -px:10 -bdrs:2">Lorem ipsum</span>
  <span class="-bd: -px:10 -bdrs:2">Dolor</span>
  <span class="-bd: -px:10 -bdrs:2">Sit amet</span>
  <span class="-bd: -px:10 -bdrs:2">Consectetur</span>
  <span class="-bd: -px:10 -bdrs:2">Adipisicing</span>
</div>

Opt-in

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

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>