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

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

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

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

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

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

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

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

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

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

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

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>
);