使容器全宽与flex [英] Make container full width with flex

问题描述

我想根据< ul> 的长度创建一个带有几列的类别下拉菜单。

我在这里创建了一个小提琴

我想将每个子菜单项放在前一个子菜单项下，直到达到子菜单的高度。如果是这样，那么一切都应该放在一个新的列中。

这样的东西：

 主类别
 | 
 subcategory1 subcategory3 
 | subsub1为subcategroy1 | subsub1为subcategroy3 
 | subsub2为subcategroy1 | 
 | subcategory4 
 subcategory2 | etc ... 
 | subsub1为subcategroy2 
 | subsub2为subcategroy2 
 -------------------------- ------------------------------------------ 
 //总高度的下拉
到这里
  

我使用 flex -flow 和实际工作良好的。但是我不能让我的下拉列表容器是全宽宽度的背景颜色。

我的HTML看起来像这样：

 < div class = cats> 
< ul> 
 
< li class =item sub> 
< a title =Babyhref =http://ministry.webshopapp.com/baby/class =itemLink>宝宝< / a> 
< div class =subnav> 
< ul class =flex-wrap> 
< li class =subitem title>< a title =Borstvoedinghref =＃class =title> something< / a>< / li& 
< li class =subitem>< a title =ATTITUDEhref =＃class =subitemLink> ATTITUDE< / a>< / li> 
< li class =subitem>< a title =Apple Parkhref =＃class =subitemLink> Apple Park< / a>< / li& 
< li class =subitem title>< a title =Borstvoedinghref =＃class =title> something< / a>< / li& 
< li class =subitem>< a title =ATTITUDEhref =＃class =subitemLink> ATTITUDE< / a>< / li> 
< / ul> 
< / div> 
< / li> 
< / ul> 
< / div> 
  

由于CSS使用这个：

  .cats .subnav {
 background：#fff none repeat scroll 0 0; 
 border：1px solid #eee; 
 padding：30px; 
 position：absolute; 
 text-align：left; 
 z-index：99; 
 display：none; 
} 
 .cats .item.sub：hover .subnav {
 display：block; 
} 
 .flex-wrap {
 background：#fff none repeat scroll 0 0; 
 display：flex; 
 flex-flow：column wrap; 
 height：200px; 
} 
 .subnav .subitem {
 background：#fff none repeat scroll 0 0; 
 line-height：36px; 
} 
  

那么如何让 .subnav

解决方案

请参考下面的css代码：

添加左和右到 .cats。 subnav

  .cats .subnav {
 right：0; 
 left：0; 
} 
  

I'm trying to create a category dropdown menu with a few columns depending on the length of the <ul>.

I've created a fiddle here

I want to place each submenu item underneath the previous one until the height of the submenu is reached. If so then everything should be placed in a new column.

Something like this:

Main category
 |
 subcategory1                         subcategory3
  |subsub1 for subcategroy1            |subsub1 for subcategroy3 
  |subsub2 for subcategroy1           |
 |                                    subcategory4
 subcategory2                          | etc...
  |subsub1 for subcategroy2 
  |subsub2 for subcategroy2 
 --------------------------------------------------------------------  
 // total height of the dropdown 
    is reached here

I'm using flex-flow and for that which actually works good. However I can't get my dropdown container to be full-width width a background color.

My HTML looks like this:

    <div class="cats">
      <ul>

        <li class="item sub">
          <a title="Baby" href="http://ministry.webshopapp.com/baby/" class="itemLink">Baby</a>
          <div class="subnav">
            <ul class="flex-wrap">
              <li class="subitem title"><a title="Borstvoeding" href="#" class="title">something</a></li>
              <li class="subitem"><a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a></li>
              <li class="subitem"><a title="Apple Park" href="#" class="subitemLink">Apple Park</a></li>
              <li class="subitem title"><a title="Borstvoeding" href="#" class="title">something</a></li>
              <li class="subitem"><a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a></li>
            </ul>
          </div>
        </li>
</ul>
</div>

As CSS is use this:

.cats .subnav {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #eee;
  padding: 30px;
  position: absolute;
  text-align: left;
  z-index: 99;
  display:none;
}
.cats .item.sub:hover .subnav {
  display: block;
}
.flex-wrap {
  background: #fff none repeat scroll 0 0;
  display: flex;
  flex-flow: column wrap;
  height: 200px;
}
.subnav .subitem {
  background: #fff none repeat scroll 0 0;
  line-height: 36px;
}

SO how can I make .subnav to fill the background for as much needed?

解决方案

Please refer the below css code:

Add left and right to .cats .subnav

.cats .subnav {
    right: 0;
    left: 0; 
}

这篇关于使容器全宽与flex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！