logo
backtop

Flex Box

(Posted 18:36:42 on 4th March 2023 by Rag)
This UI/UX upgrade I'm doing that leverages Bootstrap, utilizes a base 12 flex box model. This is one of the things my dad has been evangelizing forever. Not the flex box bit, but the base 12 bit rather than base 10. We all know base 10 because it's the number system we use and it's easy as when you multiply something by 10, you stick a zero on it. The challenge comes with division as 10 is not an easy number to divide - it's only divisible by 10,5,2 and 1, whereas 12 is divisible by 12,6,4,3,2 and 1 along with relatively easy manipulation at 8, 9 and 10. 12 is therefore a much easier number if you want to divide it into smaller components. Flex box is quite easy to visualize - imagine that every row has 12 boxes in it. You can then format your layout within that, so if you want 2 columns you make each column 6 boxes wide. If you want 3 columns, you make each column 4 boxes wide etc. You can also do odd sizes like make the first column 2 boxes wide and the other column 10 boxes wide. If you really need it, you can even sub divide each box into 12 more boxes to give you as much flexibility as you need. Hence flex box.

I was surprised when I caught the side of the Alpha Tuari during the pre season practice as I noticed that it had Flex Box on the side of the front wing. Turns out this is a container storage company that offers flexibility in the size of shipping containers.
Rag_2023-03-04_181925.jpg

All of this is great, but it's also the nickname I gave to a gymnast I used to date.
0 comments

 

This is a Build Your Own Blog entry.