Question

我如何使用flexbox完成此操作？（查看图片）

通常，行之间的空间等于其中一行中的最长列。我希望下面的列紧跟在之后的列之后。

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%;
}

我的标记：

<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>

现在我的列被渲染为：

Answer 1

您可以使用

#DeliveryDistrictListPage .list {
    align-items: flex-start;
}

Align-items和justify-content可以修改元素的对齐方式。

Flexbox，多行问题

1 个答案: