Hello and welcome back to the react course and in this guide, we are going to set up a flexbox for our component here our birthday form component. After that in the next guide we will be implementing the style for the date picker and then we will be implementing the style for the generate button. So to get started let's go over into our birthdayForm.js and let's give it some tags so we can work with it in CSS. So first we need a class name on this first div here. We want that to be birthday-container and for this we're going to want a class name of clock-container and above the date picker we want a class name of date-picker-container and then for the DatePicker itself we want a class name date-pickerand finally for the submit button let's cut this out

and let's put a div in here and put it back in and let's give it a class name of submit-container.

We will be using the birthday container tag the date picker container tag and the clock container tag in this video. Okay so in our main.scss let's just copy this and put birthday form.

Now go in your components and create a new SCSS file called birthdayForm.scss. Save this file and then in our birthdayForm let's add these tags birthday-container, date-picker-container and clock-container.

So we're dealing with the containers in this video and in the next one we will be styling the actual date picker and then after that, the actual submit button. So let's go ahead and in the birthday-container let's use our mixin so @include center-item and give it a value of $pull-x: -50%, pull-x and make sure it has a dollar sign in front of it $pull-x: -50%,, $top: 50%, and $left: 50%. So this will center it and that's all we need for the birthday-container. So save that and let's see if that does anything. All right so it puts us right in the middle of the screen and that's exactly what we want.

Now let's go ahead and implement flexbox into our date-picker-container. So if you look back at this birthday form or drag it over here so it's on the screen. You see we have our date picker and we have these two objects we have the submit container and the date picker. We want to put these in a nice flex layout with column. The direction will be set to column so if you remember how to do that go ahead and do it right now if you don't remember just that's fine just watch me and type as I go. So display: flex; to make it a flex container and then flex-direction we want that to be column like I just said justify content well let's see what we have so far before typing out justify content, okay save it and reload it and you can't really tell but we have our Flex container here.

So now what we want to do is justify-content and do center and then we want to align the items so align-items: center; okay so that sets us up with flexbox you can see that the generate button just moved to the center. So there's not a whole bunch different because they're already their own inline-block elements their own block elements so their own block elements, not inline-block elements so they're on their own line anyway. But at least with align-items, we were able to center it quickly. So another thing you'll notice if you hit generate countdown the change date button has moved here

which we don't want. That's because it's picking up the styles of probably our birthday-container. So if we comment this out it might go back. All right so yeah it looks like it's back there. Let's put that back in and you'll notice it moves here. So to fix that all we have to do is declare that width and height of this clock-container because the clock is contained within this so now it's back to normal. It looks like it's off a bit and I'm pretty sure it was off a bit before let's just comment this out to see if that was the case. So it's still off in the exact same spot and we put this in and we put this back in and it's back there. Okay so let's go ahead and let's move this over to the right a little bit. In our clock.scss we can do this by giving this left value under changed a slightly larger value so 21 could push it over a bit. Let's do 21.5 and that's looking pretty close and let 's go ahead and let's close the clock file and it looks like that's all we're doing in this video. So the in the next guide we're going to start styling this component the date picker itself and then right after that in the next video we will be covering the generate countdown button and then we should be good to go and onto the next app.

.birthday-container {
    @include center-item($pull-x: -50%, $pull-y: -50%, $top: 50%, $left: 50%);
  }

.date-picker-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

.clock-container {
    width: 100vw;
    height: 100vh;
 } 

So let's go ahead and commit our code and then get into the next video. So

git status
git add .
git commit -m "added flexbox to birthday form component"

All right I will see you guys in the next video.

Resources

Source Code