In previous article, the toy browser parsed and tokenized a HTML file. After that, it built a DOM Tree mounted with all the computed CSS rules. A question is remained: How to render a div having a CSS flex: 1 ?

In this article, the last one of toy browser series, I will resolve this problem, and render an image from DOM Tree.

CSS Layout

There are several kinds of CSS layouts:

• Normal flow
• Flexbox
• Grid layout

To make the toy browser simple, I will focus on Flexbox, which is very useful in daily work. There is an awesome article that explains how Flexbox works: A Complete Guide to Flexbox. If you are not familiar with Flexbox, please read it. The code of the function layout will help you to understand this part, too.

The general idea of this part is to translate the rules of Flexbox into 10 properties:

• mainSize, mainStart, mainEnd, mainSign, mainBase
• crossSize, crossStart, crossEnd, crossSign, crossBase

The flex model

They are well explained by MDN. Here, mainSign is a boolean. If the writing mode is from left to right on the main axis, it will be true. mainBase is the starting position of flex item in the flex container of the main axis. It is the same for the cross axis.

Having the general idea, let’s dive deeper to understand how the toy browser deals with Flexbox. In general, it takes 3 steps to calculate Flexbox.

• calculate flex container’s size
• calculate flex items by the main axis
• calculate flex items by the cross axis

#css #image #flexbox