0

I'm stuck on this problem trying to stack two items inside a flexbox. Currently, I've got all the items working horizontally which is great but I want to get the two last buttons on top of each other so they match in size. It should look like a mini-grid.

I've tried using position absolute for the last two items but it causing a number of alignment issues for the whole area. It's going into a WordPress menu so I'm not able to add a container for the last 3 items.

<ul class="menu">
  <li class="menu-item"><a href="#">Menu Item</a></li>
  <li class="menu-item"><a href="#">Menu Item</a></li>
  <li class="menu-item"><a href="#">Menu Item</a></li>
  <li class="menu-item"><a href="#">Menu Item</a></li>
  <li class="menu-item big-button"><a href="#">My Big Button</a></li>
  <li class="menu-item small-button1"><a href="#">Small Button</a></li>
  <li class="menu-item small-button2"><a href="#">Small Button</a></li>
</ul>

Is there a better way to do this?

enter image description here

https://jsfiddle.net/HeliumVideo/svmcpdju/1/

Michael Wood
  • 91
  • 7
  • Unless I am missing something, that is not possible with flexbox unless you use a container. However, if you must stick to a css only solution, you can use css grid. Would that be an option? – anpel Nov 18 '20 at 01:13
  • It could be but I wasnt sure how to set it up that I don't have a predefined number of items before. The idea is to build a menu with this that can be updated without falling apart when I add a future item. I got very close mixing absolutely positioning but again the alignment just didn't work to center everything vertically. – Michael Wood Nov 18 '20 at 01:21

0 Answers0