htmlcsssassflexboxalignment

Align items equally using CSS with different parents


I want align items with equal spacing and with different parents and without adding any width to those items. I tried below code but not working. Please help me to on this.

<div class="container">
  <div class="buttons">
   <button>test</button>
   <button>test</button>
   <button>test</button>
   <button>test</button>
 </div>
 <button class="outer">test</button>
</div>

.container{
  display:flex;
  width:100%
}
.buttons{
  display: flex;
  width: 75%;
  justify-content: space-between;
}
.outer{
  margin-left:auto
}

Link for my code https://jsfiddle.net/f74ayxh9/

I want result like this with equal spacing and margin but with my HTML structure. enter image description here

Thank you


Solution

  • You can do this with display: contents on the button container element.

    .container {
      display: flex;
      justify-content: space-between;
      outline: 1px solid red;
      margin: 2em;
    }
    
    .buttons {
      display: contents;
    }
    <div class="container">
    
      <div class="buttons">
        <button>
     test
     </button>
        <button>
     test
     </button>
        <button>
     test
     </button>
        <button>
     test
     </button>
      </div>
      <button class="outer">
    test
    </button>
    </div>