Question

我有一个包含多个块的页脚菜单。

block-menu-block，其中包含1到3个无序列表项（.menu-block-2 .menu li）的菜单。

多个.block-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>

Answer 1

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

然后，给每个弹性项flex-grow:1，这将确保剩余的空间（例如，如果只有四个块）将在所有孩子中均匀分布。

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

有关详细信息，请参阅Complete Guide to Flexbox。

Answer 2

当你有四个街区时，似乎你正在寻找类似的东西？

* {
  box-sizing: border-box;
}

.region-footer {
  display: flex;
}

.block {
  flex: 1;
}

.block-menu-block {
  min-width: 40%;
  max-width: 50%;
}

.block-block {
  min-width: 20%;
  max-width: 25%;
}

.menu-name-menu-footer > .menu {
  display: flex;
}

.menu-name-menu-footer > .menu > li {
  flex: 1;
  min-width: 50%;
}



/* The following styles are just to help visualize what's going on */
.block,
a {
  color: #fff;
}

h2 {
  margin: 0 0 0.5em;
}

.menu-name-menu-footer > .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-name-menu-footer > .menu > li:first-child {
  background: red;
  padding: 0.5em;
}

.menu-name-menu-footer > .menu > li:last-child {
  background: green;
  padding: 0.5em;
}

#block-block-2 {
  background: blue;
  padding: 0.5em;
}

#block-block-1 {
  background: purple;
  padding: 0.5em;
}

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

当你有五个街区时，就像这样......

* {
  box-sizing: border-box;
}

.region-footer {
  display: flex;
}

.block {
  flex: 1;
}

.block-menu-block {
  min-width: 40%;
  max-width: 50%;
}

.block-block {
  min-width: 20%;
  max-width: 25%;
}

.menu-name-menu-footer > .menu {
  display: flex;
}

.menu-name-menu-footer > .menu > li {
  flex: 1;
  min-width: 50%;
}



/* The following styles are just to help visualize what's going on */
.block,
a {
  color: #fff;
}

h2 {
  margin: 0 0 0.5em;
}

.menu-name-menu-footer > .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-name-menu-footer > .menu > li:first-child {
  background: red;
  padding: 0.5em;
}

.menu-name-menu-footer > .menu > li:last-child {
  background: green;
  padding: 0.5em;
}

#block-block-2 {
  background: blue;
  padding: 0.5em;
}

#block-block-1 {
  background: purple;
  padding: 0.5em;
}

#block-block-3 {
  background: orange;
  padding: 0.5em;
}

<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 id="block-block-3" class="block block-block">
    <h2>5th Block</h2>
    <p>I'm the 5th block</p>
  </div>
</div>

一个CSS flexbox问题，需要安排多个宽度相同的容器

2 个答案: