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.
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.