css - flexbox 使用 flex wrap 调整多行内容 block

Question

我想使用 flex-wrap 属性来调整 multiliges 上的内容。

我的问题是 li 没有挨在一起

我的容器有什么遗漏吗？

<div class="bloc-FancyDisplay">    


    <ul class="hal-pub-list-type-2">
        <li class="row hal-pub" style="padding-bottom: 20">
            <a href="/publication/hal-01253144">Jean-Marie Barbaroux, Dirk Hundertmark, Tobias Ried, Semjon Vugalter. STRONG SMOOTHING FOR THE NON-CUTOFF HOMOGENEOUS BOLTZMANN EQUATION FOR MAXWELLIAN MOLECULES WITH DEBYE-YUKAWA TYPE INTERACTION. Kinetic and Related Models , AIMS, 2017, 10 (4). &amp;lt;hal-01253144&amp;gt;</a>
        </li>
    </ul>


    <ul class="hal-pub-list-type-2">
        <li class="row hal-pub" style="padding-bottom: 20">
            <a href="/publication/hal-01308770">C. Duval, G.W. Gibbons, P.A. Horváthy. Conformal and projective symmetries in Newtonian cosmology. Journal of Geometry and Physics, Elsevier, 2017, 112, pp.197--209. &amp;lt;10.1016/j.geomphys.2016.11.012&amp;gt;. &amp;lt;hal-01308770v3&amp;gt;</a>
        </li>
    </ul>


    <ul class="hal-pub-list-type-2">
        <li class="row hal-pub" style="padding-bottom: 20">
            <a href="/publication/hal-01401473">Aoife Bharucha, M. Beneke, P. Ruiz Femenia, Andrzej Hryczuk, S. Recksiegel. The last refuge of mixed wino-Higgsino dark matter. Journal of High Energy Physics, Springer Verlag (Germany), 2017. &amp;lt;hal-01401473&amp;gt;</a>
        </li>
    </ul>


    <ul class="hal-pub-list-type-2">
        <li class="row hal-pub" style="padding-bottom: 20">
            <a href="/publication/in2p3-01372979">D. Barducci, A. Bharucha, N. Desai, M. Frigerio, B. Fuks, et al.. Monojet searches for momentum-dependent dark matter interactions. Journal of High Energy Physics, Springer, 2017, 01, pp.078. &amp;lt;10.1007/JHEP01(2017)078&amp;gt;. &amp;lt;in2p3-01372979&amp;gt;</a>
        </li>
    </ul>


    <ul class="hal-pub-list-type-2">
        <li class="row hal-pub" style="padding-bottom: 20">
            <a href="/publication/hal-01435264">B Herlemont, O Ogievetsky. Rings of h-deformed differential operators. Theoretical and Mathematical Physics, 2017. &amp;lt;hal-01435264&amp;gt;</a>
        </li>
    </ul>

.bloc-FancyDisplay{
  background: rgb(233,233,233);
 ;

}

ul.hal-pub-list-type-2 {
  display: flex;
  flex-wrap: wrap;
  list-style: outside none none;
  margin-left: -20px;
}

ul.hal-pub-list-type-2 li {
  flex-basis: calc(35% - 20px);
  background:white;
}

ul.hal-pub-list-type-2 li.hal-pub > a {
  border-bottom: medium none;
  color: inherit;
  display: inline-block;
  margin: 10px;
  padding: 10px;
  word-break: normal;
}

ul.hal-pub-list-type-2 li.hal-pub a:hover {
  background-color: rgb(150, 60, 245);
  color: rgb(255, 255, 255);
}

http://codepen.io/matoeil/pen/bgPMjZ

Answer 1

display: flex 应该应用于要显示为 flex 元素的元素的父级，因此移动 display: flex; flex-wrap: wrap; 到 bloc-FancyDisplay

并且 flex 元素属性应该应用于直接子项，因此将 flex-basis: calc(33% - 20px); 移动到 ul.hal-pub-list-type- 2(注意我把它改成了 33%)

Updated codepen