With the release of pdfHTML 3.0.4, we are pleased to announce that we now support the CSS Flexible Layout Box module module.
CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. It is currently in the W3C's candidate recommendation stage, although has been around for a number of years now and has proven to be popular since it's a simple, reliable, and fast solution with wide browser support. The flex layout allows responsive elements within a container to be automatically arranged depending upon the screen size.
Before the Flexbox Layout module, there were four layout modes:
- Block, for sections in a webpage
- Inline, for text
- Table, for two-dimensional table data
- Positioned, for explicit position of an element
The Flexible Box Layout Module makes it easier to design a flexible responsive layout structure without using floats or positioning. You can refer to A Complete Guide to Flexbox for more details, such as all the different possible properties for the parent (flex container) element and the child (flex items) elements. There are also many useful resources there including history, demos, patterns, and a browser support chart.
In pdfHTML 3.0.4 we've added initial support for the flexbox framework. The support of all flexbox properties is not comprehensive yet, however, it can already handle a lot of use-cases.
In the following example, we'll use the following HTML code for a pretty common use-case - the creation of a two-column layout stretched to the full width of the page.
These styles define the flexbox-related behavior.
As you can see, the flex columns stretch to the full width of the page, regardless of their width.
Sometimes it may be necessary to keep their initial width (40% in our case).
In that case, you may also want to specify their positioning. This can be done using the justify-content property.
This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size
pdfHTML 3.0.4 supports the following values :
To do this, we'll need to adjust our styles.
As a result, we now have two columns placed at the right border of the page.