---
path: "/flex/2"
component: "flex"
type: "atom"
date: "2017-07-12T17:12:33.962Z"
title: "Flex with alignments"
---
<codeblock>
<Card border="1px dotted cyan" >
  <Flex m={1} alignItems="center" justifyContent="center">
    <Card p={2} m={1} border="1px solid cyan">Card</Card>
    <Card p={2} m={1} border="1px solid cyan">Card</Card>
    <Card p={2} m={1} border="1px solid cyan">Card</Card>
    <Card p={2} m={1} border="1px solid cyan">Card</Card>
  </Flex>
</Card>
</codeblock>