Tag Archive | CSS3

Tutorial: Create ruler using Flexbox layout


Flexbox coming with CCS3 is an useful, handy way to do layouts in CSS. Learning using flexbox is pretty simple and you can find out a bunch of resource to learn this. In this post, I give a tutorial to apply flexbox to create ruler with pure HTML and CSS.

Plan ahead

Before getting started, we need to imagine and break down components needed to form a ruler. There are some you may think of:

  • Ruler board
  • Major sticks
  • Minor sticks
  • Value for major sticks

For example, we are going to create one like this:


We have 11 major sticks that go with 11 corresponding values. For each segment between 2 adjacent major sticks, there are 9 minor sticks or you can think there are actually 11, but the first and last one are hidden behind the major sticks.

Read More…