Hopefully, that project went well for you. Let us walk through what my solution was and also talk about the process that I used when I was building it out. So the very first thing I did is I came up and I just created a new mix in. I called it mix-in Flex config and then I'm going to pass some arguments and I'm not going worry about them at this moment. I'm just going to make some space for it just like that. And then I came and I just added some comments just so that I could keep track of everything.

So I knew that I needed display flex. So I know that's going to have to be there and let me just come down and I'm going to do some other comments. This ID has a few different keyboard shortcuts and I'm used to using. So just display flex and then I know that I need justify-content. And then after justify-content, I knew I needed flex After that I needed flex-direction. And then lastly I know I needed align-items. So with these in place now I can organize my code.

Now the one thing I do know if you look at all of this code and you don't need any flexbox kind of skill in order to know this is not a prerequisite at all. If you look at each item whenever we call display flex or any of the five items that we need to contain You may notice display flex is in all of them. So what that tells me is we don't need to take display flex as an option. It is always needed. So the nice thing about that, that means that our first one is taken care of for us. So I can just say display flex and that one's done. So any time that we call this flex config then it's going to be set.

Now the other thing I know that I need is each one of these other ones is optional. So I'm going to set these as different variables so up here they're going to be their own set of arguments. So just very content then it's going to be $ flex then we're going to have $ flex-direction. And lastly, we're going to have $ align-items now as a review just remember these are our arguments now because of the way that these work. It's very important that we do one new thing here. We should say it would make life a lot easier on us later on. If I leave these just like this then I'm going to have to always have this order memorized and I just know myself and I'm not very good at memorizing that kind of stuff so I'm not going to do that. I'm going to use what are called named arguments. Technically you could have got the whole thing working without named arguments because they're not something that we specifically went over yet. But you'll see it's actually the exact same syntax as using defaults.

So the way this is going to work is I want to set up each one of these defaults to be false. So every one of these is going to be false by default. What that's going to allow me to do is now whenever I check and whenever I set up my conditionals I'm going to be able to check to see if the element is true or false or I should say if it's false if it is not false that tells me that it has some type of value and I need to set that value if it is false. So if it's taking in the default It means that when I called that it meant that it wasn't ever set and if that is about as clear as mud don't worry we're going to go through in detail.

So let's set up some pretty basic conditionals. I'm going to set up my first one. It's going to say if justify-content is not equal to false. So in other words, if it is set. So by default, it's going to be false so if when I call this like we're going to call this very first one when I call flex config justify-content flex-direction all these are going to be false because I'm not going to pass in any values for those. So I'm going save justify-content is not false. Then I want to set the justify-content value and that's it. So I'm going to say justify-content and here what we're going to say is justified content and just set it just like we're doing right here and this is obviously going to take the value of the variable and it's going to pipe it right in here. And so it's going to set that value.

So now with that in place what I can do is I can just go and populate each of the other ones so that the second one is going to be flex this one's going to be flex-direction. Then this last one is going to be align-items and I'm going to get rid of my comments since I now have these up there as my arguments. We have justify-content. Now let's take care of flex since that's our second one. Now let's take care of flex-direction so this is going to be the third one and last but not least we're going to take care of align-items. So we have to make sure we're also setting the actual value. So this one's going to be Flex direction. And lastly, this is going to be flex. Believe it or not, that is it. We now have a full flex mix in a full flexbox mix in. And now we can get to the fun part which is cleaning up all of our code. So the very first thing we're going to do is we are going to say import or include I get those mixed up a lot so I'm going to say include flex config right here. As you can see the error went away. Look at this. Everything's still the same. That's good. The whole goal of this project is everything would be the same when you're done with it. So that is a good sign. Now, this is our most basic one because remember when we're calling this all of these items are going to be false because we're not setting any values we're not passing in any arguments at all. So each one of these when it checks to see it's going to say OK is justified content false, no, it is or it is false so we don't have to worry about this. Let's get a check for Flex then extraction Let's go see that all of them are still false and because of that all it's going to do is set the one display flex value.

So that is the first one we're getting there. Now I'm going to put this right at the top of our item. So here we have flex display flex and we know we can get rid of this par justify-content and that's it. So here we have those two. You know the way that you can set these are the way you can use named arguments here is I can say flex just like that. Then I can say justify-content, same thing. Now I can get rid of all of this. And now you can see everything is still working. All the buttons are there the images are lined up. The item is still working. If we were to delete these items you can see that it no longer works. So that is a great sign. We are well on our way. So I'm going to just come copy this again and you can see that we have our identical just display flex. I'll get rid of that one. And technically we can leave that in there but I like to be nice and uniform with all of the calls.

This next one we have three elements so we have display flex which we can get rid of and then we have a flex-direction and then a justified content. So let's add these as arguments. So Flex direction is column and then justify-content just like that except now we need to add in the dollar sign make sure you always add that in. That's how it knows what it is. And look at that were back up and running. Everything is working and our code is looking so much cleaner.

Next moving down right here. We have this button group and it looks like in the starter code I had a duplicate call so we don't have to worry about putting flex and on that just line items center. So display flex We don't need we only need a line items center. So I'm going to pull that out and then just replace these items there. And now everything all of our items are back up and running. So we are moving along. The next one is the button. So with this button, we know that we don't need to display flex. We already have a line item center so that when we already had in there from what we copied in and then we need to have this flex-direction set. So here I'm going to say flex direction row and then we also need justify-content center so paste that in and let's get rid of our old lines and everything is back up and running. And if you look at everything else we've done.

So every one of our code elements that used to rely on all those manually typed in Flexbox style definitions and that full list. Now they are completely encapsulated in this nice set of mix in elements so now this one mix and can manage all of our flexbox type of behavior throughout the entire application. This just makes life much easier it's much easier to know what I have access to. And if you notice we cut off a number of lines from this specific file. Now you may say that I added 19 lines with this mix and but when you think of a massive application. So, for example, dev camp has tens of thousands of lines of CSS code. When you have a lot of flexbox it's utilized throughout tens and actually hundreds of CSS files then you're going to have this type of container wrapper in each one of those files that all had a lot of flexbox a lot of duplicate code in there. And so it with a 19 line mix in I was able to go and eliminate all that from the entire application. So that makes the code much more efficient it's organized so much better it's much easier to make changes on the fly. And for future CSS files or future Scss files that I create, I know that I don't have to worry about manually typing out all of those different mixing elements I can or all those flexbox elements I can just call a mix and just like we did right here. So if you went through that. Excellent job. That is definitely a non-trivial type of mixin to implement. It included everything from conditionals to named end to fall argument types to using variables all kinds of different things like that. So very nice work.

In the code below I've created a 'flex-config' mixin that completely removes all of the messy flex style rules:

@mixin flex-config($justify-content: false, $flex: false, $flex-direction: false, $align-items: false) {
  display: flex;

  @if $justify-content != false {
    justify-content: $justify-content;
  }

  @if $flex != false {
    flex: $flex;
  }

  @if $flex-direction != false {
    flex-direction: $flex-direction;
  }

  @if $align-items != false {
    align-items: $align-items;
  }
}

.container {
  @include flex-config;
  .item {
    @include flex-config($flex: 1, $justify-content: space-between);
    border: 1px solid grey;
    border-radius: 5px;
    margin-bottom: 10px;
    .content {
      @include flex-config;
      .metadata {
        @include flex-config($flex-direction: column, $justify-content: center);
        margin-left: 20px;
        .title {
          margin: 0px;
        }
      }
    }
    .btn-group {
      @include flex-config($align-items: center);
      .button {
        @include flex-config($flex-direction: row, $align-items: center, $justify-content: center);
        height: 100%;
        width: 42px;
        font-size: 2em;
        a {
          color: green;
          text-decoration: none;
        }
        &:hover {
          background-color: maroon;
          cursor: pointer;
          a {
           color: white; 
          }
        }
      }
    }
  }
}

So what exactly is going on? Let's walk through it line by line:

• I'm setting a full list of variables that could potentially be used for this flexbox implementation and I'm setting all of them to false by default.
• Inside of the mixin, I always have the 'display: flex' rule set since that is needed for each time that the mixin is included.
• Then I check to see if each variable is not false (this means that the variable was used). If so, I set the style rule to the value passed in as the argument.
• From there I simply include the mixin in each place where the old flexbox code was.
• For the locations where only the 'display' rule was called, I can call the mixin with no arguments.
• In the locations that had a set of rules, such as align-items or flex-direction, I pass in the values with named arguments.
• And that's it. Not only is this container class cleaned up, but not I can call this mixin from anywhere else in the application that uses flexbox.