# Flexbox not working in my react app

**URL:** <https://forum.freecodecamp.org/t/flexbox-not-working-in-my-react-app/416504>\
**Category:** General\
**Created:** [August 21, 2020, 9:23am UTC](https://forum.freecodecamp.org/t/flexbox-not-working-in-my-react-app/416504 "2020-08-21T09:23:41Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![joshkwannacode](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/joshkwannacode/32/167581_2.png) [@joshkwannacode](https://forum.freecodecamp.org/u/joshkwannacode)\
**Post date:** [August 21, 2020, 9:23am UTC](https://forum.freecodecamp.org/t/flexbox-not-working-in-my-react-app/416504/1 "2020-08-21T09:23:41Z")

</div>

I was trying to move my buttons using flexbox but it doesnt work… I’ve tried inline styles, material ui flex box, and just css too but it doesnt work and im clueless why. Could anyone help?

> **[great-chatterjee-4qbvp - CodeSandbox](https://codesandbox.io/s/great-chatterjee-4qbvp?file=%2Fsrc%2Findex.js)**
>
> great-chatterjee-4qbvp by joshkwannacode using @material-ui/core, @material-ui/icons, @material-ui/system, axios, qs, react, react-dom, react-router-dom, react-scripts

the buttons are in component/GrammarForm and component/ResetButton  
btw dont worry about Main.js errors stripped it so its easier to read.

 ![flexbox](https://global.discourse-cdn.com/freecodecamp/original/3X/0/0/004dc6bf172523afe3251c16c46728c84c4854d9.png)

---

<div class="post-metadata">

**Author:** ![danielsainz](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/danielsainz/32/119518_2.png) [@danielsainz](https://forum.freecodecamp.org/u/danielsainz)\
**Post date:** [August 21, 2020, 9:56am UTC](https://forum.freecodecamp.org/t/flexbox-not-working-in-my-react-app/416504/2 "2020-08-21T09:56:31Z")

</div>

> **[@material-ui/system - Material-UI](https://material-ui.com/es/system/basics/#all-inclusive)**
>
> Funciones estilizadas de sistema y estilo para construir potentes sistemas de diseño.

---

<div class="post-metadata">

**Author:** ![joshkwannacode](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/joshkwannacode/32/167581_2.png) [@joshkwannacode](https://forum.freecodecamp.org/u/joshkwannacode)\
**Post date:** [August 21, 2020, 10:57am UTC](https://forum.freecodecamp.org/t/flexbox-not-working-in-my-react-app/416504/3 "2020-08-21T10:57:36Z")

</div>

so do i have to put the buttons in the box?

---

<div class="post-metadata">

**Author:** ![miku86](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/miku86/32/95580_2.png) [@miku86](https://forum.freecodecamp.org/u/miku86)\
**Post date:** [August 21, 2020, 12:54pm UTC](https://forum.freecodecamp.org/t/flexbox-not-working-in-my-react-app/416504/4 "2020-08-21T12:54:21Z")

</div>

Hey Joshua,

I created a `div` under the `textarea` and put the resetbutton and the check button into it.  
Then I made the `div` a row flexbox and justified it `space-between`.

![Screenshot_2020-08-21_14-53-27](https://global.discourse-cdn.com/freecodecamp/original/3X/e/d/ed5f7832b5f188e271d5f0d7810e99f5a86083f6.png)

---

<div class="post-metadata">

**Author:** ![joshkwannacode](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/joshkwannacode/32/167581_2.png) [@joshkwannacode](https://forum.freecodecamp.org/u/joshkwannacode)\
**Post date:** [August 21, 2020, 1:17pm UTC](https://forum.freecodecamp.org/t/flexbox-not-working-in-my-react-app/416504/5 "2020-08-21T13:17:05Z")

</div>

thanks man actually i just solved it too lol i added flex box to the form element then some more shit, but i think your solution sounds easier.  
btw is there a way to keep the reset button aligned with the text-box? cuz there is a bit of space

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:43pm UTC](https://forum.freecodecamp.org/t/flexbox-not-working-in-my-react-app/416504/6 "2021-06-01T18:43:10Z")

</div>

Closed on June 1, 2021, 6:43pm UTC


