Flex

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

対応するHTML構造

<div class="l--flex">...</div>

Props

wrap: flex-wrap の値を指定できます。
direction: flex-direction の値を指定できます。
gap: gap の値を指定できます。
rowGap: row-gap の値を指定できます。
columnGap: column-gap の値を指定できます。
ai: align-items の値を指定できます。
ac: align-content の値を指定できます。
ji: justify-items の値を指定できます。
jc: justify-content の値を指定できます。

Import

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

DEMO

<Flex>

Item

リサイズ可能エリアです ↑

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

flexオプションの指定など

Flex Component

リサイズ可能エリアです ↑

<Flex gap={20} fxw='wrap' jc="center" p={20}>
	<div>...</div>
	<div>...</div>
	<div>...</div>
</Flex>

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

改行位置がない長い文字列があると画面幅が狭い時に要素がはみ出してしまうことがあります。（特に子要素がpaddingを持っているとはみだしやすい。）

.l--flex>*に対してoverflow-wrap: anywhere;を指定すれば回避できるが、それをしてしまうと必要ない部分にまで影響が出るため、デフォルトでは overflow-wrap は指定していません。必要な時にユーティリティクラス.-ovw:anyを使って回避してください。

画面幅が狭い時にAAA...が長すぎて横にはみ出す例

AAAaaaAaaaaaaaaaaaaaaaaaaaa

BBB

CCC

DDD

リサイズ可能エリアです ↑

<Flex fxw="nowrap" gap={20}>
	<p>AAAaaaAaaaaaaaaaaaaaaaaaaaa</p>
	<p>BBB</p>
	<p>CCC</p>
	<p>DDD</p>
</Flex>

はみ出す原因となるテキストに overflow-wrap:anywhere を適用

Lorem ipsum text AAAaaaAaaaaaaaaaaaaaaaaaaaa

BBB

CCC

DDD

リサイズ可能エリアです ↑

<Flex fxw="nowrap" gap={20}>
	<p className="-ovw:any">Lorem ipsum text AAAaaaAaaaaaaaaaaaaaaaaaaaa</p>
	<p>BBB</p>
	<p>CCC</p>
	<p>DDD</p>
</Flex>

Flex Item について

Flexの子要素に対するFlexオプションを指定する方法は以下のページを参考にしてください。

Flex Props - flexitemの指定

Box Cluster