Flex (l--flex)

l--flex is a class for arranging content using Flexbox.

CSS

.l--flex {
  display: flex;

  > * {
    min-width: 0;
  }
}

Lism Component

Import

import { Flex } from 'lism-css/react';

import { Flex } from 'lism-css/astro';

Usage

Basic usage

↓

<Flex>

Item

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

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

Using flex props

↓

Using flex props

Flex Content

Resize

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

<div class="l--flex -fxw:wrap -g:20 -jc:center">
  <div>Flex Content</div>
  <div>Flex Content</div>
  <div>Flex Content</div>
</div>

Child element flex props

↓

Using flex props on child elements

Flex Content

Resize

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

<div class="l--flex -g:20">
  <div class="-fx:1">Flex Content</div>
  <div class="-fxb -fxb_sm -fxb_md" style="--fxb: 50%; --fxb_sm: 33%; --fxb_md: 25%">Flex Content</div>
</div>