Flex Tables
flextable
Base class. It is required for any of the others.
equalcells
Forces all cells in the equal table to be the same size.
spacedcells
Creates 20px of padding on the right of each cell, except the furthest right (goes to 0)
border
Adds a faint border to the cells
centervertically or centercellvertically (center individual cell)
Centers the content in the cells
centerhorizontally or centercellhorizontally (center individual cell)
Centers the content in the cells
wrapitems
Wraps content to the next line if the content is big enough. Usually you would not use equalcells class with this class.
Mobile Variants
flowflexonmobile
Changes the system to wrap to the next line only when on mobile
columnonmobile
Puts item in a column on mobile devices
reverseonmobile
Puts item in a column on mobile devices and reverses the order they are displayed
blockonmobile
Forces items in table to be displayed as full width block items.
rowonmobile
Forces items in table to be displayed as row on mobile.
Common Examples
flextable equalcells spacedcells columnonmobile
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus.
flextable equalcells spacedcells centervertically columnonmobile
OR
flextable equalcells spacedcells centervertically columnonmobile style="justify-content: space-around;"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus.
flextable spacedcells centervertically columnonmobile
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus.
flextable border equalcells spacedcells columnonmobile
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus.
flextable wrapitems spacedcells columnonmobile
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus.
Follow