Question

我有一些显示megamenu的项目：flex;我已经将每个flexd div中的列表调整为flex列。

问题是，有时列表会有太多项目，我需要它们在同一行重新开始。

关于codepen的示例：https://codepen.io/james_zedd/pen/KRyQao

我将第一个ul的高度修改为100px作为例子。容器div没有适应ul的新宽度。

我在这里做错了什么？

＆＃13;

/* -- Mega MEnu -- */

.megamenu {
  display: flex;
  background-color: #f5f5f5;
  opacity: 0;
  visibility: hidden;
  max-height: 430px;
}

.megamenu.first {
  opacity: 1;
  visibility: visible;
}

.megamenu__linklist {
  padding: 30px 0 26px 40px;
}

.megamenu__linklist h4 {
  margin-top: 0;
  margin-bottom: 12px;
}

.megamenu__linklist ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.megamenu__linklist a:hover {
  color: red;
}

＆＃13;

<div id="mm01" class="megamenu first">

  <div class="megamenu__img">
    <img src="//cdn.shopify.com/s/files/1/0023/6516/1525/files/mm_01_330x430.jpg?v=1525703183" alt="Custom Printing Tshirts">
  </div>



  <div class="megamenu__linklist">

    <h4>T-Shirts and Clothing</h4>
    <ul class="mm_links" style="height:100px">

      <li><a href="/collections/t-shirts" class="f-class-01 light">T-Shirts</a></li>

      <li><a href="/collections/hoodies-sweatshirts" class="f-class-01 light">Hoodies/Sweatshirts</a></li>

      <li><a href="/collections/performance" class="f-class-01 light">Performance</a></li>

      <li><a href="/collections/golf-shirts-polos" class="f-class-01 light">Golf Shirts/Polos</a></li>

      <li><a href="/collections/woven-shirts" class="f-class-01 light">Woven Shirts</a></li>

      <li><a href="/collections/hats-and-toques" class="f-class-01 light">Hats and Toques</a></li>

      <li><a href="/collections/outerwear" class="f-class-01 light">Outerwear</a></li>

      <li><a href="/collections/pants-shorts" class="f-class-01 light">Pants/Shorts</a></li>

      <li><a href="/collections/ladies" class="f-class-01 light">Ladies</a></li>

      <li><a href="/collections/youth" class="f-class-01 light">Youth</a></li>

      <li><a href="/collections/infants-youth" class="f-class-01 light">Infants/Toddlers</a></li>

    </ul>
  </div>



  <div class="megamenu__linklist">

    <h4>Sports and Teams</h4>
    <ul class="mm_links">

      <li><a href="#" class="f-class-01 light">Hockey</a></li>

      <li><a href="#" class="f-class-01 light">Soccer</a></li>

      <li><a href="#" class="f-class-01 light">Basketball</a></li>

      <li><a href="#" class="f-class-01 light">Baseball</a></li>

      <li><a href="#" class="f-class-01 light">Football</a></li>

      <li><a href="#" class="f-class-01 light">Lacrosse</a></li>

      <li><a href="#" class="f-class-01 light">Volleyball</a></li>

      <li><a href="#" class="f-class-01 light">Track and Field</a></li>

      <li><a href="#" class="f-class-01 light">Rugby</a></li>

      <li><a href="#" class="f-class-01 light">Cycling</a></li>

    </ul>
  </div>



  <div class="megamenu__linklist">

    <h4>Signs and Displays</h4>
    <ul class="mm_links">

      <li><a href="#" class="f-class-01 light">Adhesive Decals</a></li>

      <li><a href="#" class="f-class-01 light">Backdrops</a></li>

      <li><a href="#" class="f-class-01 light">Banners</a></li>

      <li><a href="#" class="f-class-01 light">Signs</a></li>

    </ul>
  </div>



  <div class="megamenu__linklist">

    <h4>PRINTD</h4>
    <ul class="mm_links">

      <li><a href="#" class="f-class-01 light">About</a></li>

      <li><a href="#" class="f-class-01 light">FAQ</a></li>

      <li><a href="#" class="f-class-01 light">Contact Us</a></li>

      <li><a href="#" class="f-class-01 light">Privacy Policy</a></li>

      <li><a href="#" class="f-class-01 light">Terms and Conditions</a></li>

    </ul>
  </div>


</div>

＆＃13;

Answer 1

我注意到有时候，flexbox行内的flexbox列（反之亦然）不会按照我期望的顺序进行渲染数学运算。这似乎也在这里发生。

考虑对子元素使用flex-direction:row而不是column，并为其指定具体的width或flex-basis。这样的事情似乎可以解决你的问题：

.megamenu .megamenu__img+.megamenu__linklist ul {
  /* height: auto; */
  flex-direction: row;
}
.megamenu .megamenu__img+.megamenu__linklist ul li {
  flex: 0 0 33.33%;
}

https://codepen.io/mblase75/pen/MGOVoW

CSS Flex - 嵌套弹性列表不会扩展父宽度

1 个答案: