Flexbox is another way to position the elements on your homepage. I find it a bit easier to understand than the box model. Flexbox Froggy is a webpage minigame to help understand the different properties that are available in Flexbox.
To start, we need to understand that flex containers and flex items are 2 separate things. Flex containers will contain flex items, so the direct child elements of flex containers are considered as flex items. To specify a flex container, you must add a CSS declaration of display: flex or display: inline-flex. There are several properties and their values that we will discuss too, these will include justify-content, align-items, flex-grow, flex-shrink, flex-basis, flex, flex-wrap, align-content, flex-direction, and flex-flow. If any of the topics are linked, it means it was challenging to describe it in a post To quickly describe what display: flex does, lets imagine 3 squares vertically stacked with the div class. If you added display: flex in CSS, it would cause those squares to line up horizontally side by side. display: inline-flex works pretty similarly, but will leave inline elements as they are instead of turning them into blocks.
justify-content consists of 5 values, flex-start, flex-end, center, space-around, and space-between. Let's imagine 3 boxes, side by side, flushed to the left as their default position. flex-start will normally position all 3 boxes flushed to the left, or the start of the line. flex-end however will take the 3 boxes and flush them to the right, or the end of the line. center, accordingly named, will take the 3 boxes and put them side by side in the center of the page. space-around will leave a gap of space between the 3 boxes, as well as 2 gaps at the start and end of a line (space 1 - box 1 - space 2 - box 2 - space 3 - box 3 - space 4). space-between will only create 2 larger spaces that separate box 1 from box 2, and box 2 from box 3 (box 1 - space 1 - box 2 - space 2 - box 3), so that box 1 and box 3 are flushed to the start and end, and box 3 assumes the center spot.
align-items deals with items inside the container, and also has 5 values, although I'm not as confident at explaining 2 of them so I will leave a link to visually understand it all . This time we will discuss we are reusing flex-start, flex-end, and center, however we are also now including baseline and stretch (both of which I have a slightly harder time explaining). If we take our 3 identical squares before, placing them side by side and in the center of a container, flex-start will place the items flushed at the top of the container and remaining in the middle. flex-end will place the items all at the bottom of the container. center is straightforward once again, and would place the items floating in the middle of the container.
Very brief, but the flex property includes all of flex-grow, flex-shrink, and flex-basis all at the same time, the values just need to be placed in that respective order.
flex-wrap has 3 values, wrap, wrap-reverse, and nowrap. Let's imagine 5 squares numbered 1-5 (in order left to right) aligned in a row. As a page compresses sideways, the squares will squeeze together and reorient themselves. In wrap, square 5 will drop down a row, followed by square 4 on its left. In wrap-reverse, the entire row except for square 5 drops down a row, then square 4 joins it on square 5's left. In nowrap however, the squares will remain in place and won't move despite how smushed the webpage is.
Unfortunately I couldn't explain everything, but sometimes seeing how it works on your own is better than simply reading an explanation. I hope that this post could be of some use!
Top comments (1)
Thanks for the refresher on flexboxes!