Flexing Your Code

Transcript

We've looked at block tags like header, paragraph and h1. There are a bunch of other tags that are blocked by default to like section and footer. We've looked at inline tags like insert, and delete. Of course, there are more inline tags as well, like anchor strong, an emphasis.

One tag that isn't really block or inline is an image tag. The image tag is a mix of both. By default, its width and height are determined by its content just like an inline tag. But you can also change its width and height with CSS, which makes it kind of like a block tag.

Here are two images. Right now they're side by side because they're acting like inline tags. They're pretty small, but I can change their size like blocks. I'm going to make the width of each image 45%. This means that they take up 90% of the width of the page total, leaving 10% leftover. I can add a bit of margin to the left and right and now they're almost perfectly centered.

Since we know how images, blocks and inline tags work, we can start coding. First, I'll look at my mock up. Let's see I have 2 sections. And each section has an image, a heading and a paragraph. I want to recreate the first row. So we'll add two sections to my HTML file. Let's check out how this renders in the browser. Ah, the problem is sections are stacked on top of each other because they're blocked by default. This isn't what I want.

So how do I put them side by side? I'll wrap all of my sections in main tags. The main tags hold the main content of your page, the content that you expect your users to spend most of their time looking at and enjoying. Now I can give the main tag a display value of flex. There, the sections are officially in one row.

A tag with display flex takes up 100% of the width of its parent like block but changes how the block tags inside of it work. Instead of taking up 100% of their parent’s width, they act more like images. Their width is determined by their content and you can change their width with CSS. Now I can do the same thing with my sections that I did with my images. I'll give them a width of 45% a bit of margin there. I recreated the first row of sections from my mock up.