When adding display: flex to a container, the items inside that container will participate in flex layout. The default of the items is to be aligned a row. Instead of changing the value of display, you can decide whether it should be layout as a column or as a row by using the flex-direction property. The sequence of the items inside the container can also be controlled by this property. For example, by changing the flex-direction to row reversed, the items will be aligned horizontally while the main start and the main end will be swop. Not only the direction of the items can be changed, but also the text direction can be reversed by the writing-mode property. As in English, the text starts from left and then is written horizontally. But when changing the writing mode to vertical, the main start place will be the edge that the text starts, regardless of what it is default to. Therefore, It is easy to change the direction for both the text and box in the flex container.

The other benefits are more related to the space inside and outside the items. Normally, there will be no space between the items and we have to manually adjust the space between items to make it look even. The property justify-content can help us to make the container evenly spread out on the page automatically. When the container has displayed items with an extra space to spread out, the justify-content:space-between helps to spread the items in the space. However, it won’t work if all items are distributed tightly in the container. The other property named align-items shows how the box can be stretched based on your choice. If you didn’t assign any value to this property, it will automatically be stretched to the tallest item. Last but not least, in flexbox, heavier text takes more space than others.The initial values of flex use the space more efficiently, which means that default of flexbox already helps to solve some problems we might encounter.