CSSフレックスボックスの問題で、同じ幅の複数のコンテナを配置する必要があります

Question

複数のブロックを含むフッターメニューがあります。

block-menu-block 1から3の順序なしリスト項目（.menu-block-2 .menu li）のメニューがあります。

複数の.block-blockのアイテムです。

私が欲しいのは、.block-menu-block ul.menu liとblock-blockアイテムに同じ幅を割り当てることです。したがって、フッターが例のようであれば、すべてのアイテムに25％の幅があります。メニューがコードブロックに似ているが、3つの.block-blockアイテムの場合は、すべてのアイテムに20％を割り当てます。

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

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

4つのブロックのすべてのは

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

25％であるべきブロックのすべては、フレキシボックスと正確に幅を設定する必要はありません

<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

ブロックが4つあるときに、このようなものを探しているようですね。

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

そして、このような何かあなたが5つのブロック...

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

20％であるべきです。最初の幅をいくつか作成してください（たとえば、フッターに最大5つのブロックがある場合は、幅を20％に設定します）。

フレックスアイテムflex-grow:1を指定すると、残りのスペース（たとえば、ブロックが4つしかない場合）がすべての子に均等に分散されます。

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

詳細については、Complete Guide to Flexboxを参照してください。