Monthly Archives: April 2022

Spacing and Aligning Flex Items

display: flex; align-items: center; * justify-content: flex-start; * (This is the default. As you can see everything is pushed to to left margin.) * Two of the most important properties that apply to the flex container. Another one is gap. … Continue reading

Posted in Web Developer Course | Tagged , , , | Leave a comment

A Flexbox Overview

What is Flexbox? Flexbox is a set of related CSS properties for building 1-dimensional layouts. The main idea behind flexbox is that empty space inside a container element can be automatically divided by its child elements. Flexbox makes it easy … Continue reading

Posted in Web Developer Course | Tagged , , | Leave a comment

Introduction to Flexbox

If you have a lot of divs or paragraphs before you define flexbox it might look like this: Adding the following to the container changes the above to this: .container { display: flex; } Everything is now side by side … Continue reading

Posted in Web Developer Course | Tagged , , , , | Leave a comment

Box-sizing: border-box

Adding padding and border sizes will now reduce the content size, but it makes it so much easier than trying to add up border + padding + content of every element in your CSS. Without the box-sizing: border-box property your … Continue reading

Posted in Web Developer Course | Tagged , , , , , , , , | Leave a comment