NOC Week 8: Flexbox

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:

Marcus Tang
Marcus Tang
Marcus is a 2nd year computing student at the National University of Singapore. He has great passion in Computing and both Frontend and Backend engineering.

Latest posts

10 Best UI/UX Design Courses in 2021 (+Tips)

User interface (UI) and User Experience (UX) design are two of the most demanding skills that have dominated so far in 2021. Getting advancement...

Django Periodic Task with Celery Task Queue

Task Queue? Periodic Tasks? What are they? Task Queue is a way of organizing work or tasks in programs asynchronously, without a user’s request, and distribute...

Understanding Models, Views and Serializers in Django

Soo we are back once again this week, talking about models, views and serializers — essentially everything you will need to get an up-and-running...

More from author


Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related posts