Recently I needed to set up a site with columns that were responsive (3 columns in desktop, 2 columns in tablet and one column in mobile), and the desire was to have all of the columns display like a table, so that the background colours would all sit in line without any big gaps. Thanks to CSS3 and Flexbox, we have an answer!
In all of my searches there seemed to be no easy way to do this, so I have to roll my own. This is an example of what I ended up with:
<?php
$count = 0;
$cols = array (
3,
2,
1
);
$columns = array (
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
'Curabitur at justo a ipsum ornare consectetur. Etiam ut dictum ante, id aliquet velit. Nulla hendrerit sem eu est vulputate, non consectetur mauris tincidunt. Etiam condimentum odio nec blandit blandit. Donec eleifend justo nec lacus convallis varius eu eu mi.',
'Etiam dapibus massa diam, a interdum sem ullamcorper nec.',
'Donec elementum aliquam bibendum. In hac habitasse platea dictumst. Sed id magna rhoncus magna porta iaculis non sed enim. Mauris faucibus vel sapien eget facilisis. Proin cursus massa eget sapien commodo, nec convallis lacus porta.',
'Cras sem ipsum, bibendum sed aliquet non, dapibus vitae nisl. Phasellus sollicitudin nibh orci, semper consectetur nunc dignissim.',
'Ut commodo et turpis et pretium. Nunc ac quam urna. Sed luctus laoreet sem id vestibulum. In facilisis bibendum lectus at venenatis. Suspendisse ac nunc quis dolor imperdiet faucibus.'
);
?>
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Testing</title>
<style type="text/css">
#flex_container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: 32%;
background: #E5E5E5;
margin: 0 0 30px 2%;
}
.item.col_3_0 {
margin-left: 0;
}
@media screen and (max-width: 1200px) {
.item,
.item.col_3_0{
flex-basis: 48%;
margin-left: 4%;
}
.item.col_2_0 {
margin-left: 0;
}
}
@media screen and (max-width: 800px) {
#flex_container {
display: block;
}
.item,
.item.col_3_0,
.item.col_2_0 {
display: block;
width: auto;
margin: 30px 0;
}
}
</style>
</head>
<body>
<h1>Flexbox Testing</h1>
<div id="flex_container">
<?php foreach ($columns as $content): ?>
<?php
$class = array ('item');
foreach ($cols as $col) {
$class [] = 'col_'.$col.'_'.($count % $col);
} // foreach ()
$count++;
?>
<div class="<?php echo implode (' ', $class); ?>">
<p><?php echo $content; ?></p>
</div>
<?php endforeach; ?>
</div>
</body>
</html>
As you can see, the columns are spaced nicely with fluid widths, and everything scales down nicely between breakpoints.
The beauty in this is the display:flex; for the main content container, and the flex-basis setting for the internal items. Using percentage widths for these has made it easy.
I hope that this can help out others and they can use this in their own sites.