Designing the layout for a website such that all of the elements end up appearing where you want them to can be surprisingly tricky, but fear not! Flexboxes can make this task less of a chore, and I'm here to teach you the basics of how to make use them.
Introduction
So first, what is a Flexbox? In short, it's a set of CSS properties that can be used on a container element to allow its child elements to dynamically position themselves based on the webpage's size. Let's take a look at the basics - say we have the following HTML code:
<div id="container">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
</div>
Without adding any CSS styling, the default values would have the child elements display top to bottom in a column.
So let's add the first of the CSS properties needed to implement our Flexbox:
#container {
display: flex;
}
With that CSS property in place, the child elements will now display left to right in a row instead of a column.
Of note, if you want your elements to be displayed in a column, all you would need to do is add the following CSS property: flex-direction: column;
Aligning Your Child Elements
We now have a few options for how to align our items along the axis we have decided for them to appear on (i.e. in a column or row). For this, we use the justify-content CSS property, which can have the following values:
flex-start - The default value, this will cause the child elements to start at the top (for columns) or left (for rows) of where the container is placed on the page.
flex-end - The inverse of flex-start, this will cause the child elements to start at the bottom/right depending on if it's a row or column
center - This will center the elements in the middle of the row or column they're on
space-between - This will evenly distribute the child elements along the row or column they're on
space-around - This is identical to space-between except that it will include some space between the edges (that is to say, the left and right edges of the page for a row or top and bottom edges of the page for a column)
space-evenly - This is much like space-between in that it will evenly distribute space between all of the items is the same, rather than distributing all items evenly along the row/column they're placed on. This distinction is most significant when the elements within the container are different sizes.
The above values are also used for the align-items CSS property, which pertains to the cross axis (i.e. if the child elements are being placed in a row, it would pertain to the vertical axis; if they were being placed in a column it would pertain to the horizontal access). This allows you to fine tune how the elements in your Flexbox are positioned on your page.
To help illustrate how these values work, here's handy visual reference:
Making Your Elements Wrap
Now, if you were to try out a CSS styling object that looked something like this:
#container {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
then you might notice that when the page shrinks enough to compress the elements in your Flexbox, each individual element will scrunch up, maybe pushing some of its characters onto the line below. What if you wanted to have the elements themselves shift to lower rows rather than their contents? This is where flex-wrap comes into play!
Setting the flex-wrap CSS property to the value wrap will allow the child elements to be pushed onto a new line (or column) if the page is shrunk enough to compress them, rather than squishing them together on the same line as the default value nowrap would do. The way these elements are repositioned can also be customized with the align-content CSS property, which uses the same values as the other alignment based properties previously discussed (i.e. flex-start, flex-end, etc.) to determine how to handle where child elements are 'pushed' to along the cross axis.
Conclusion
And that's it, those are the basics of Flexboxes! I hope that this blog post has given you some insight into how to more easily position elements on your webpages!
Sources
https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css3_flexbox_container.asp
https://www.w3schools.com/css/css3_flexbox_items.asp
https://www.w3schools.com/css/css3_flexbox_responsive.asp
https://www.youtube.com/watch?v=phWxA89Dy94&list=PLSkg_1mheG-12IDNqSdHS02_nvaT4B_a1&index=9
Top comments (0)