Making Websites With #Next.js And #Strapi - [04] - Layouts With #Reflexbox

In this episode we are going to learn how to layout your #React components using Reflexbox.

Reflexbox is part of Rebass UI React components. These components are built for styled systems like Emotion, that we are using in this series. We are going to use just the Reflexbox part of Rebass, and Reflexbox is - "Ergonomic, responsive React layout and grid system" - as it's written in their documentation.

As you will see Reflexbox is very powerfull and flexible, and can be used on any React based project that uses styled system.

### Code used in this video

### You can support my work on Patreon

### Follow me on Social Media

[alinademi]

Awesome explanation about theming with emotion in a quick yet simple way! Thank you Ivan.

[refaat]

we need more videos in this series, god bless you :)

[handa]

reflexbox doesn't work anymore on react 18, so I guess you need npm install rebass instead

[maksakymenko]

Hello! Thanks for another great video! I am also wondering what theme are you using here in editor?

[federicoaguilera]

Great series dude. hope it continue. maybe login with strapi auth using redux or context? greetings from Argentina

[lebonron]

great series. hope it continue. maybe implement pagination? maybe login with strapi auth? and graphql? just suggestions

[rickrothweiler]

Great series! I am following along and in the Card component it is wrapped in a div with class "poster". I don't see that class in any css, am I missing something?

[kurtvanhal]

Hi, great series! For some reason my variants aren't working. Adding the css directly to the "Box" component does work. Any explanation for this?

[LeeRongZhao]

Hi . By using style component with emotion how do implement animation library like gsap ? Or what are the alternative way to do it ? Would u mind to share some simple animation infuture episode. Thanks!

[ittklhh]

Спасибо за видео! Есть небольшая проблема: когда я использую ThemeProvider из @emotion/react, то variant="container" не работает. Решил проблему: import ThemeProvider from 'theme-ui'. Но почему @emotion/react не работает, можете подсказать?

[VictorStarkman]

hi I tried tu use reflexbox with the installation of emotion that all ready present a problem and in this moment my app crash.How can I use them together like you use.

[nickperry]

Why might nothing happen when using the two Flex props "justifyContent", "flexDirection"? It is being imported from reflexbox within the index.js file. I thought it was interesting that under the "Themes" column on the official docs page of Reflexbox, it states "N/A" for those two props. Is this maybe why they're not working? Thanks, Ivan.