Html CSS flexbox问题，需要以相同的宽度排列多个容器

我有一个带有多个块的页脚菜单

一个

块菜单块

，其菜单包含1到3个无序列表项（

.menu-block-2.menu li

）

和多个

.block

项

我想要的是页脚为

.block menu block ul.menu li

和

block block

项指定相同的宽度。因此，如果页脚与示例类似，则每个项目的宽度为25%。如果菜单类似于代码块，但有三个

.block block

项，则为每个项分配20%

-[region-footer]-----------------------------------------
|             |             |             |             |
|ul.menu.li 1 | ul.menu.li 2|block-block-2|block-block-1|
|             |             |             |             |
|             |             |             |             |
---------------------------------------------------------

\------ block-menu-block---/

四个区块中的每个区块应为25%

-[region-footer]-------------------------------------------------------
|             |             |             |             |             |
|ul.menu.li 1 | ul.menu.li 2|block-block-3|block-block-2|block-block-1|
|             |             |             |             |             |
|             |             |             |             |             |
-----------------------------------------------------------------------

每个区块应为20%

<div class="region region-footer">
  <div id="block-menu-block-2" class="block block-menu-block">
    <div class="content">
      <div class="menu-block-wrapper menu-block-2 menu-name-menu-footer parent-mlid-0 menu-level-1">
        <ul class="menu">
          <li class="first expanded menu-mlid-734"><span class="nolink">Headline</span>
            <ul class="menu">
              <li class="first leaf menu-mlid-735"><a href="http://google.com">One page</a></li>
              <li class="last leaf menu-mlid-736"><a href="http://google.com">Another page</a></li>
            </ul>
          </li>
          <li class="last expanded menu-mlid-785 social-menu-block"><span class="nolink">Social links</span>
            <ul class="menu">
              <li class="first leaf menu-mlid-784"><a href="http://facebook.com" class="social-facebook">Facebook</a></li>
              <li class="leaf menu-mlid-787"><a href="http://linkedin.com" class="social-linkedin">Linkedin</a></li>
              <li class="leaf menu-mlid-786"><a href="http://twitter.com" class="social-twitter">Twitter</a></li>
              <li class="last leaf menu-mlid-788"><a href="http://youtube.com" class="social-youtube">Youtube</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="block-block-2" class="block block-block">
    <h2>Some content</h2>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, minim molestie argumentum est at, pri legere torquatos instructior ex. Vis id odio atomorum oporter.</p>
    </div>
  </div>
  <div id="block-block-1" class="block block-block">
    <h2>Website info</h2>
    <div class="content">
      <p>Address 9</p>
      <p>Zip city</p>
      <p>Tlf. +45 12 34 56 78</p>
      <p>CVR 123 456 78</p>
    </div>
  </div>
</div>

标题





社交链接








一些内容
同一种知识是一种知识，是一种最小的争论，是一种最基本的知识

网站信息
地址9

齐普市

Tlf+4512345678

CVR 123 456 78

无需使用flexbox精确设置宽度。只需设置一些初始宽度（例如，如果页脚中最多有5个块，请将宽度设置为20%）

然后，给每个flex项目

flex grow:1

，这将确保剩余空间（例如，如果只有四个块）在所有子项中均匀分布

.region-footer {
  display: flex;
}
.region-footer .block {
  min-width: 20%;
  flex-grow: 1;
}

---

有关更多信息，请参阅。

当您有四个街区时，您可能正在寻找类似的东西

*{
框大小：边框框；
}
.区域页脚{
显示器：flex；
}
.街区{
弹性：1；
}
.块菜单块{
最小宽度：40%；
最大宽度：50%；
}
.街区{
最小宽度：20%；
最大宽度：25%；
}
.menu name menu footer>.menu{
显示器：flex；
}
.menu name menu footer>.menu>li{
弹性：1；
最小宽度：50%；
}
/*以下样式仅用于帮助可视化正在发生的事情*/
块
a{
颜色：#fff；
}
氢{
边缘：0.5em；
}
.menu name menu footer>.menu{
列表样式：无；
保证金：0；
填充：0；
}
.menu name menu footer>.menu>li:第一个子菜单{
背景：红色；
填充：0.5em；
}
.menu name menu footer>.menu>li:最后一个子菜单{
背景：绿色；
填充：0.5em；
}
#block-block-2{
背景：蓝色；
填充：0.5em；
}
#block-block-1{
背景：紫色；
填充：0.5em；
}

标题





社交链接








一些内容
同一种知识是一种知识，是一种最小的争论，是一种最基本的知识

网站信息
地址9

齐普市

Tlf+4512345678

CVR 123 456 78

很难理解您想要实现的目标，您可能需要澄清一下这一点，请考虑使用相关css创建一个代码段。。