Flex

Flex description.

Props

Flex properties

Property	Description	Type	Default
wrap	Should flex items wrap?	`boolean`	false
width	Width of the flex container	`number`
direction	Flex direction	`row` `column`	`row`
alignItems	Set flex container align-items property	`flex-start` `flex-end` `center` `baseline` `stretch`	`flex-start`
alignContent	Align flex items on cross-axis	`flex-start` `flex-end` `center` `space-between` `space-around`, etc	`stretch`
justify	Align flex items on main-axis	`flex-start` `flex-end` `center` `space-between` `space-around`, `space-evenly`	`center`

Usage

Basic Flex

Dark Mode

camara.space

woman in black and white crew neck long sleeve shirt wearing purple knit cap

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <Image
        width="25%"
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width="25%"
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width="25%"
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width="25%"
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <Image
        width="25%"
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width="25%"
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width="25%"
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width="25%"
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

Direction - Column

Dark Mode

camara.space

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="column">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="column">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

Direction - Row

Dark Mode

camara.space

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="row">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="row">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

Justify

Space Between

Dark Mode

camara.space

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="row" justify="space-between">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="row" justify="space-between">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

Space Around

Dark Mode

camara.space

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="row" justify="space-around">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="row" justify="space-around">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

Space Evenly

Dark Mode

camara.space

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="row" justify="space-evenly">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="row" justify="space-evenly">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

Center

Dark Mode

camara.space

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="row" justify="center">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="row" justify="center">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

Flex Start

Dark Mode

camara.space

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="row" justify="flex-start">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="row" justify="flex-start">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

Flex End

Dark Mode

camara.space

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="row" justify="flex-end">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex direction="row" justify="flex-end">
      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={100}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

Wrap

Dark Mode

camara.space

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex wrap direction="row" justify="space-between">
      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex wrap direction="row" justify="space-between">
      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

Align Content

Dark Mode

camara.space

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex
      wrap
      direction="row"
      justify="space-between"
      alignContent="space-between"
    >
      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

import { Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex
      wrap
      direction="row"
      justify="space-between"
      alignContent="space-between"
    >
      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />

      <Image
        width={170}
        imageUrl="https://source.unsplash.com/V_WBdOLOgJU/600x500"
        imageAlt="woman in orange knit cap and blue jacket"
      />
    </Flex>
  </BrowserWindow>
);

Flex

Props

Usage

Basic Flex

Direction - Column

Direction - Row

Justify

Space Between

Space Around

Space Evenly

Center

Flex Start

Flex End

Wrap

Align Content

On this page