将多个弹性项对齐，就像它们向右浮动一样

Question

I am trying to achieve the equivalent of floats with Flexbox.

I'm succeeding if there is only one element pushed to the right, but failing when there are multiple elements that need to be floated right, unless worked around with the general sibling selector ( ~ ).

Attempt #1:

Failing as the red block should be on the right

 .block { display: flex; margin: -5px; } .block__element { background: #ddd; padding: 5px; margin: 0 5px; } .block__element--first { order: -1; } .block__element--right { margin-left: auto; } .u-error { background: #ce0e0e; color: #fff; } 

 <div class="block"> <div class="block__element">random elem</div> <div class="block__element block__element--right u-error">right elem</div> <div class="block__element block__element--first">first elem</div> <div class="block__element block__element--right">right elem</div> </div> 

Attempt #2:

Uses the general sibling selector ( ~ ) so relies on markup order, will not work if the order is modified using order .

 .block { display: flex; margin: -5px; } .block__element { background: #ddd; padding: 5px; margin: 0 5px; } .block__element--first { order: -1; } .block__element--right { margin-left: auto; } .u-error { background: #ce0e0e; color: #fff; } 

 <div class="block"> <div class="block__element">random elem</div> <div class="block__element block__element--right u-error">right elem</div> <div class="block__element block__element--first">first elem</div> <div class="block__element block__element--right">right elem</div> </div> 

Answer 1

I think the key is not to use margin-left: auto on the items you want positioned to the right. As you can see, that spaces them away from each other.

Instead, use margin-right: auto on the right-most item of the left section. That will push everything else to the right.

 .block > div:first-child { margin-right: auto; } /* The actual left-section right-most item has order:-1, so the selector above ends up targeting the proper item. */ .block { display: flex; margin: -5px; } .block__element { background: #ddd; padding: 5px; margin: 0 5px; } .block__element--first { order: -1; } .block__element--right {} .u-error { background: #ce0e0e; color: #fff; } 

 <div class="block"> <div class="block__element">random elem</div> <div class="block__element block__element--right u-error">right elem</div> <div class="block__element block__element--first">first elem</div> <div class="block__element block__element--right">right elem</div> </div> 

Another option to consider would be to use a pseudo-element that inserts an invisible flex item between the left and right sections, giving this item flex: 1 .

 .block::after { content: "spacer element"; background: #ddd; padding: 5px; margin: 0 5px; flex: 1; visibility: hidden; /* disable this rule to see the item at work */ } .block { display: flex; margin: -5px; } .block__element { background: #ddd; padding: 5px; margin: 0 5px; } .block__element--first { order: -1; } .block__element--right { order: 2; } .u-error { background: #ce0e0e; color: #fff; } 

 <div class="block"> <div class="block__element">random elem</div> <div class="block__element block__element--right u-error">right elem</div> <div class="block__element block__element--first">first elem</div> <div class="block__element block__element--right">right elem</div> </div>