How could I accomplish this with flexbox? (check image)
Normally the space between the rows is equal to the longest column in one of the rows. I want the column below to append just after the column before.
CSS:
#DeliveryDistrictListPage .list{
margin: 0 auto;
float: none;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
#DeliveryDistrictListPage .list .column{
margin-bottom: 20px;
width: 25%;
}
My markup:
<div class="row">
<div class="list col-sm-8">
<div class="column" id="A">
<span>A</span>
<ul>
<li><a href="/distrikt/anderslov/">Anderslöv</a></li>
<li><a href="/distrikt/arlov/">Arlöv</a></li>
<li><a href="/distrikt/anderslov/">Anderslöv</a></li><li><a href="/distrikt/anderslov/">Anderslöv</a></li><li><a href="/distrikt/anderslov/">Anderslöv</a></li><li><a href="/distrikt/anderslov/">Anderslöv</a></li><li><a href="/distrikt/anderslov/">Anderslöv</a></li></ul>
</div>
<div class="column" id="B">
<span>B</span>
<ul>
<li><a href="/distrikt/bjuv/">Bjuv</a></li>
</ul>
</div>
<div class="column" id="C">
<span>C</span>
<ul>
<li><a href="/distrikt/cederholm/">Cederholm</a></li>
</ul>
</div>
<div class="column" id="D">
<span>D</span>
<ul>
<li><a href="/distrikt/dalby/">Dalby</a></li>
</ul>
</div>
<div class="column" id="E">
<span>E</span>
<ul>
<li><a href="/distrikt/eslov/">Eslöv</a></li>
</ul>
</div>
<div class="column" id="F">
<span>F</span>
<ul>
<li><a href="/distrikt/falkenberg/">Falkenberg</a></li>
<li><a href="/distrikt/falkenberg/">Falkenberg</a></li><li><a href="/distrikt/falkenberg/">Falkenberg</a></li><li><a href="/distrikt/falkenberg/">Falkenberg</a></li><li><a href="/distrikt/falkenberg/">Falkenberg</a></li></ul>
</div>
<div class="column" id="G">
<span>G</span>
<ul>
<li><a href="/distrikt/goteborg/">Göteborg</a></li>
</ul>
</div>
<div class="column" id="H">
<span>H</span>
<ul>
<li><a href="/distrikt/halmstad/">Halmstad</a></li>
<li><a href="/distrikt/helsingborg/">Helsingborg</a></li>
</ul>
</div>
<div class="column" id="I">
<span>I</span>
<ul>
<li><a href="/distrikt/insjo/">Insjö</a></li>
</ul>
</div>
<div class="column" id="J">
<span>J</span>
<ul>
<li><a href="/distrikt/jonkoping/">Jönköping</a></li>
</ul>
</div>
<div class="column" id="K">
<span>K</span>
<ul>
<li><a href="/distrikt/karlstad/">Karlstad</a></li>
</ul>
</div>
<div class="column" id="L">
<span>L</span>
<ul>
<li><a href="/distrikt/lund/">Lund</a></li>
</ul>
</div>
<div class="column" id="M">
<span>M</span>
<ul>
<li><a href="/distrikt/malmo/">Malmö</a></li>
</ul>
</div>
<div class="column" id="N">
<span>N</span>
<ul>
<li><a href="/distrikt/norrkoping/">Norrköping</a></li>
</ul>
</div>
<div class="column" id="O">
<span>O</span>
<ul>
<li><a href="/distrikt/oskarshamn/">Oskarshamn</a></li>
</ul>
</div>
<div class="column" id="P">
<span>P</span>
<ul>
<li><a href="/distrikt/pitea/">Piteå</a></li>
</ul>
</div>
<div class="column" id="R">
<span>R</span>
<ul>
<li><a href="/distrikt/ronneby/">Ronneby</a></li>
</ul>
</div>
<div class="column" id="S">
<span>S</span>
<ul>
<li><a href="/distrikt/skaraborg/">Skaraborg</a></li>
</ul>
</div>
<div class="column" id="T">
<span>T</span>
<ul>
<li><a href="/distrikt/trelleborg/">Trelleborg</a></li>
</ul>
</div>
<div class="column" id="U">
<span>U</span>
<ul>
<li><a href="/distrikt/umea/">Umeå</a></li>
</ul>
</div>
<div class="column" id="V">
<span>V</span>
<ul>
<li><a href="/distrikt/vellinge/">Vellinge</a></li>
<li><a href="/distrikt/vaxjo/">Växjö</a></li>
</ul>
</div>
<div class="column" id="Y">
<span>Y</span>
<ul>
<li><a href="/distrikt/ystad/">Ystad</a></li>
</ul>
</div>
<div class="column" id="Å">
<span>Å</span>
<ul>
<li><a href="/distrikt/albo/">Ålbo</a></li>
</ul>
</div>
<div class="column" id="Ä">
<span>Ä</span>
<ul>
<li><a href="/distrikt/angelholm/">Ängelholm</a></li>
</ul>
</div>
</div>
</div>
Right now my columns get rendered as this:
