Flex

Quick start

Here's a quick start guide to get started with the flex component

Importing flex

import { Flex } from "@hover-design/react";

Code Snippets and Examples

Flex Default

<Flex>
  <div>flex 1</div>
  <div>flex 2</div>
</Flex>

flex 1

flex 2

Flex Direction

<Flex flexDirection="column">
  <div> flex 1 </div>
  <div> flex 2 </div>
</Flex>

• column

  flex 1

  flex 2

• row

  flex 1

  flex 2

• column-reverse

  flex 1

  flex 2

• row-reverse

  flex 1

  flex 2

Flex Wrap

<Flex flexWrap="wrap">
  <div> flex 1 </div>
  <div> flex 2 </div>
</Flex>

• wrap

  flex 1

  flex 2

  flex 3

  flex 4

  flex 5

  flex 6

  flex 7

  flex 8

• nowrap

  flex 1

  flex 2

  flex 3

  flex 4

  flex 5

  flex 6

  flex 7

  flex 8

Align Content

<Flex alignContent="center">
  <div> flex 1 </div>
  <div> flex 2 </div>
</Flex>

• center

  flex 1

  flex 2

  flex 3

  flex 4

  flex 5

  flex 6

  flex 7

  flex 8

• flex-start

  flex 1

  flex 2

  flex 3

  flex 4

  flex 5

  flex 6

  flex 7

  flex 8

• flex-end

  flex 1

  flex 2

  flex 3

  flex 4

  flex 5

  flex 6

  flex 7

  flex 8

• space-between

  flex 1

  flex 2

  flex 3

  flex 4

  flex 5

  flex 6

  flex 7

  flex 8

• space-around

  flex 1

  flex 2

  flex 3

  flex 4

  flex 5

  flex 6

  flex 7

  flex 8

• stretch

  flex 1

  flex 2

  flex 3

  flex 4

  flex 5

  flex 6

  flex 7

  flex 8

Justify Content

<Flex justifyContent="center">
  <div> flex 1 </div>
  <div> flex 2 </div>
</Flex>

• center

  flex 1

  flex 2

  flex 3

• flex-start

  flex 1

  flex 2

  flex 3

• flex-end

  flex 1

  flex 2

  flex 3

• space-between

  flex 1

  flex 2

  flex 3

• space-around

  flex 1

  flex 2

  flex 3

• space-evenly

  flex 1

  flex 2

  flex 3

Align Items

<Flex alignItems="center">
  <div> flex 1 </div>
  <div> flex 2 </div>
</Flex>

• center

  flex 1

  flex 2

  flex 3

  flex 4

• flex-start

  flex 1

  flex 2

  flex 3

  flex 4

• flex-end

  flex 1

  flex 2

  flex 3

  flex 4

• baseline

  flex 1

  flex 2

  flex 3

  flex 4

• stretch

  flex 1

  flex 2

  flex 3

  flex 4

Flex Shrink

<Flex>
  <Flex flexShrink="1"> flex 1 </Flex>
  <div> flex 2 </div>
  <div> flex 3 </div>
</Flex>

flex 1

flex 2

flex 3

Flex Grow

<Flex>
  <div> flex 1 </div>
  <Flex flexGrow="2"> flex 2 </Flex>
  <div> flex 3 </div>
</Flex>

flex 1

flex 2

flex 3

Flex Basis

<Flex>
  <div> flex 1 </div>
  <div> flex 2 </div>
  <Flex flexBasis="120px"> flex 3 </Flex>
</Flex>

flex 1

flex 2

flex 3

Gap

<Flex gap="20px">
  <div> flex 2 </div>
  <div> flex 3 </div>
</Flex>

flex 1

flex 2

flex 3

Props Referece

Attributes	Values	Optional ?
flexDirection	row | column | row-reverse | column-reverse	Yes
flexWrap	wrap | no-wrap	Yes
alignContent	normal | start | center | end | flex-start | flex-end | space-between | space-around | space-evenly | stretch	Yes
justifyContent	normal | start | center | end | flex-start | flex-end | space-between | space-around | stretch	Yes
alignItems	normal | start | center | flex-start | flex-end | space-between | space-around | stretch | end	Yes
flexShrink	number	Yes
flexGrow	number	Yes
flexBasis	width | max-content | min-content | fit-content | content	Yes
gap	normal | length | percentage	Yes
onClick	() => void;	Yes
onHover	() => void;	Yes
display	flex | inline-flex	Yes