Richten Sie ein Flex-Element ohne einen zusätzlichen Wrapper aus.

Question

Ich versuche ein Layout zu erstellen, in dem die meisten Elemente links vom Ansichtsfenster ausgerichtet sind, aber ein Element muss rechts ausgerichtet sein.

würde ich lieber nicht float: right; in diesem Fall verwenden und würde es vorziehen, die Verwendung von justify-content: flex-end;

ich codepen gemacht habe, um die visuell das richtige Layout zeigt, aber es hat eine extra div (Ich habe es .remove-this-div Titel), die ich lieber nicht dort habe, wie ich meinen Aufschlag so sauber wie möglich und vermeiden Wrapper divs behalten mag, wo sie nicht

Codepen

Das mark-up ich bin nach, während erforderlich sind Immer noch die Taste zum Ausrichten right ist wie folgt:

<section> 
    <div>I sit to the left</div> 
    <div>I sit to the left</div> 
    <div>I sit to the left</div> 
    <div>I sit to the left</div> 
    <button>I sit to the right</button> 
</section> 

Answer 1

section { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 500px; 
 
} 
 

 
button { 
 
    align-self: flex-end; /* `margin-left: auto` would also work */ 
 
} 
 

 
section > * { 
 
    outline: 1px solid black; 
 
}

<section> 
 
    <div>I sit to the left</div> 
 
    <div>I sit to the left</div> 
 
    <div>I sit to the left</div> 
 
    <div>I sit to the left</div> 
 
    <button>I sit to the right</button> 
 
</section>

Revised Codepen

Mehr über flex Ausrichtung und auto Margen hier: Methods for Aligning Flex Items

Answer 2

Die Eigenschaft, die Sie hier suchen sind ist align-self :

section{ 
 
    display:flex; 
 
    font-family:sans-serif; 
 
    flex-direction:column; 
 
    justify-content:flex-start; 
 
} 
 
button{ 
 
    align-self:flex-end; 
 
}

<section> 
 
    <div>I sit to the left</div> 
 
    <div>I sit to the left</div> 
 
    <div>I sit to the left</div> 
 
    <div>I sit to the left</div> 
 
    <button>I sit to the right</button> 
 
</section>