This week concludes the second month of my internship at 9cv9 as part of the NUS Overseas College (NOC) Southeast Asia programme. Over the course of the internship so far, whenever I need to quickly center or position content in the frontend, my goto solution has always been flexbox.
According to MDN Web Docs, the CSS Flexible Box Layout (Flex Box) is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. This provides an easier way to lay out, align and distribute space among items in a container by “flexing” their sizes to either grow to fill unused space or shrink to avoid overflowing.
Flexbox has a main axis (which by default is horizontal) and a cross axis which is perpendicular to the main axis. The main axis can be set using flex-direction and can be assigned row or column to determine its direction. You can also append ‘-reverse’ behind if you need the start and end to be swapped. It is important to understand the direction of the axes as it is the core of flexbox and the rest of the properties depend on it. One interesting thing is that the start and end is not assumed and is based off the wiring mode property, which is useful for languages such as aracbic which reads right to left instead of left to right like english.
The first step is always to create the flex container, which is done by setting the container’s display property to flex or inline-flex. All direct children of the container are known as flex items. A very useful cheatsheet I use to reference the various properties of flexbox can be found here. By using a combination of properties, aligning items in the center of a container, which was previously very troublesome to implement, can be done with a simple:
