我有一个包含多个块的页脚菜单。
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>
答案 0 :(得分:1)
无需使用flexbox精确设置宽度。只需制作一些初始宽度(例如,如果页脚最多有5个块,则将宽度设置为20%)。
然后,给每个弹性项flex-grow:1
,这将确保剩余的空间(例如,如果只有四个块)将在所有孩子中均匀分布。
.region-footer {
display: flex;
}
.region-footer .block {
min-width: 20%;
flex-grow: 1;
}
有关详细信息,请参阅Complete Guide to Flexbox。
答案 1 :(得分: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>