In this article, I'm going to explain how to format a division as multi-column. Only CSS Flexbox will be used. I'm amazed how CSS Flexbox is powerful, and easy. The two columns division follows:
HTML
We must add a class to our division. This is the only required change to HTML. In our case, the class name is flexColumns.
CSS
The following is required CSS:
.flexColumns {
/* flexbox stuff */
column-count: 2;
column-gap: 3em;
column-rule: 1px solid #000;
}
h1 {
/* flexbox stuff */
column-span: all;
}
That's all.
If you decide to change the number of columns for this division, modify column-count attribute in CSS.