Equal width flexbox columns

Independent of column content and column count.

by rudiedirkx

HTML

<ul>
    <li>Little content.</li>
    <li>Moderate content. Moderate content. Moderate content.</li>
    <li>Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content.</li>
</ul>

<ul>
    <li>Little content.</li>
    <li>Moderate content. Moderate content. Moderate content.</li>
    <li>Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content.</li>
    <li>Moderate content. Moderate content. Moderate content.</li>
</ul>


<ul>
    <li>Little content.</li>
    <li>Moderate content. Moderate content. Moderate content.</li>
    <li>Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content.</li>
    <li>Moderate content. Moderate content. Moderate content.</li>
    <li>Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content.</li>    
</ul>

CSS

* { margin: 0; padding: 0; list-style: none; box-sizing: border-box; }

body {
    display: -webkit-flex;
    -webkit-flex-flow: column wrap;
    -webkit-align-items: center;
}

ul {
    display: -webkit-flex;
    margin: 0 20px 20px;
    max-width: 800px;
}
ul:first-child {
    margin-top: 20px;
}
li {
    -webkit-flex: 1 0 0px;
    background-color: #eee;
    padding: 20px;
    overflow: hidden;
}
li:nth-child(even) {
    background-color: #ccc;
}