Let’s talk about Flex baby!

Let’s talk about my website and me. I have not been good about really trying to learn more CSS on my path of growth as a Software developer. However, I was having some problems with my Portfolio site not quite rendering how I wanted it to. A friend of mine pointed out that it could be about all the inheritance issues that I was causing by all the different ways I was trying to implement flexbox. He told me to take a good look at CSS-Tricks’s Guide to Flexbox. I learned a lot and I’ll just explain the misconceptions I had surrounding flexbox.

Once you declare display: flex; in a container the children below it will inherit from it. So once you decide to call on it all the items inside of your flex container are now dealt with different characteristics. However you can’t have items within the container to have another display within it. If that is something you wanted to do you would have to combine a grid with flex.

Align-Content, is meant to be able to manipulate how the items within the container based on a cross-axis that is created in the container. The main axis is the primary axis along which the flex items are laid out that is dependent on the flex-direction you chose to use. The cross axis is perpendicular to the main axis. So if you’re going flex-direction: row; your cross size would be your height, while in column your cross size would be your width.

Justify-Content, defines how the items within the container are presented in each row or column. Either default just putting them from the start of the container, end, or center. You can even determine how space or the margins should turn out for each item.

Align-Items, allows for how large the items become in the cross-axis. So if our direction was row(flex-start), then the items could either start from the top and come down, start from the bottom of the row and come up(flex-end), come from the center and grow equally in both sides(center), or stretch to be the size of the row itself(stretch). Baseline being the main oddball aligns based on where their baselines are and grow from there.

If you wanted to manipulate items individual you can use justify-self, flex-basis, or align-self and use the appropriate attributes for each one. You could also manipulate the positions of the children using order.

Hopefully this helps future coders as they work on their portfolio projects.