All about CSS3 for Absolute Beginners: Part 8
Hello everyone, I hope you're making great progress in learning CSS. In this article, we'll explore the powerful CSS features that will help you build better web layouts!
Mastering Flexbox and Inspect Element in CSS – A Beginner's Guide
Inspect Element Box
In your browser, right-click and press on the inspect option. You will see a panel open on the left side. This shows the HTML code of your webpage and downwards is the CSS code. It might look similar to the image below.
This is a very useful feature of the browser that helps you to manipulate the elements, styles and even logic in your webpage. You can do live editing of your code and see if the results suit you. When you refresh the page, it will reset. Try double-clicking in your HTML code and rewriting something, then press enter. You will see the changes reflected.
Notice that button that is highlighted by a red box. This helps you locate elements in the code by hovering over them. As you press this button and then hover on an element, it will show you its location in the HTML and styles in CSS. The margin is highlighted in orange and padding in green. and padding with a green color. It is very useful for analysis of the measurements.
When you scroll down in the inspect box, you will see a box with margin, border, padding and content. This demonstrates the principle of the box model in CSS.
The inspect box is useful when analyzing your code and editing it without real changes to the codebase.
Flexbox in CSS
Flexbox is one of the most important and popular topics of CSS. You will use it a lot when crafting user interfaces. In the beginning, it might sound a bit confusing but gradually you will get comfortable with it and use it for your own convenience.
The role of flexbox comes in when you want to arrange elements inside a parent container. Imagine a very big rectangular box and 6 boxes inside it. The parent box will be called the flex container and the 6 boxes inside it will be flex items. Let's create a layout that will help you observe flexbox behaviors.
<div class="container">
Here I have given one common class to all the boxes and one unique class separated by space. This will help me to reduce writing repetitive code.
.container {
In the same way, give different background colors to all the 6 boxes. Adjust the dimensions based on your screen size and comfort. Now remove the display flex property and then reapply it. You would notice that the boxes will appear on the same line when the container becomes a flex container.
Flex-direction properties
Flex direction controls the direction of the placement of the elements. The directions can be horizontal and vertical. Consider this example:
.container {
The value row means horizontal. Similarly, column means vertical. Try changing the flex-direction to 'column' and observe the difference. Now what if you want to reverse the order of the elements? For that, go for row-reverse or column-reverse. This will reverse the items' order. Try it out.
Justify-content Property
This property determines the alignment of the elements. Whether you want them to start from the left, right or end, or just place them in center.
.container {
You will see that the elements will be placed in the center of the container. Change the value to flex-end and they will start from the end. However, if you want to have some space distributed between the elements, then go for one of these: space-between, space-around, or space-evenly. These are very handy in creating a reliable design. Test them out one by one.
Align-items property
.container {
The align-items property controls the alignment vertically and the justify-content does it horizontally.
Flex Grow and Shrink Properties
When the available space in the container is left empty even after all the elements are placed inside, then flex-grow can be used to fill in the gap spaces. If an element is given a flex-grow property equals to 2, then it will take up twice the space other elements are taking in the container.
Similarly, flex shrink is used to shrink items to arrange them according to the container's size. If a flex-shrink of 2 is given then the element would shrink twice as much as other elements. Try it out on your own and observe the behavior.
Flex-basis Property
The shorthand for flex grow, shrink and basis can be something like we have for applying margin left, right, bottom and top.
.box1 {
flex: 1 2 300px;
}
This means grow will be 1, shrink will be 2 and base size is 300 pixels.
Flex wrap property
If the elements are squeezed on a single line, then flex wrap will help to distribute them on a new line. Set the property flex-wrap to wrap for action.
For example, If you have multiple items in a row and the container is too small, flex-wrap: wrap; will move items to the next line."
Wrapping up
I think that's enough for today, as I don't want to overwhelm you with too much information at a time. The concept of flexbox is very important and the better you know it, the better a CSS developer you would be.
As always, if there's anything you feel like discussing with me, then feel free to leave a comment or just reach me via the contact us page and I will try my best to help out.