previous

page 3

next

A good start but where did those gaps come from?

Not so long ago it was a real nightmare trying to lay items out on a web page. A recent innovation called flex has changed all that. But first we need to group the five images together between div tags. Then we can work the flex magic on the group. Like this:

<style>
div {
display:flex;
}
img {
border:thin solid;
}
</style>
<div>
<img src='counters/0.png'>
<img src='counters/0.png'>
<img src='counters/0.png'>
<img src='counters/0.png'>
<img src='counters/0.png'>
</div>

I'm sure that you've realised that we won't necessarily want those styles to apply to every img and div.
So it's time to introduce you to another important html attribute. This is the class attribute. It gives us a way to name any elements in our html and then use that as a reference in the CSS style section.

Let's start by putting all the images in the cell class - I could have chosen any name.

<img src='counters/0.png' class='cell'>

And for our div we'll use row.

<div class='row'>
previous
next