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

Question

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

A 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

看起来你也许正在寻找这样的东西，当你有四个街区？

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

Answer 2

没有必要与Flexbox的准确设置宽度。只需制作一些初始宽度（例如，如果页面中至多有5个块，则将宽度设置为20％）。

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

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

查看Complete Guide to Flexbox了解更多信息。