In this lesson we’ll create the Flex layout primitive component, that will allow us (together with other layout primitives) to create almost any complex layout without writing custom CSS. We’ll use [Styled System](https://styled-system.com/) to create this component. Flex is a shortcut to create Flexbox layouts: it’s based on the [Box](https://egghead.io/lessons/react-creating-the-box-layout-primitive-component-using-styled-system) component but defines `display: flex`. We can use it like this: ```jsx Foo Bar ``` This will create two `
`s aligned at the left and right sides of the Flexbox container with a minimum gap of 8 pixels (third step in our spacing scale). **We’ll use following libraries:** * [styled-components](https://styled-components.com/) * [Styled System](https://styled-system.com/) You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project: ``` npm install styled-components styled-system ``` **Useful links and documentation:** * [Styled System docs](https://styled-system.com/getting-started/) * [Build a Box](https://styled-system.com/guides/build-a-box) * [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)