余分なラッパーなしでフレックスアイテムを右揃え

Question

ほとんどのアイテムがビューポートの左に揃うレイアウトを作成しようとしていますが、1つのアイテムを右揃えにする必要があります。

私はむしろ、このインスタンスでfloat: right;を使用していないだろうと私は視覚的に正しいレイアウトを示しcodepenをしたjustify-content: flex-end;

を利用することを好むだろうが、それは余分なdiv要素を持っている（私はそれを.remove-this-divを題してきました）私はむしろ、私はできるだけきれいに私のマークアップを維持し、彼らはマークアップ

Codepen

を必要とされていないラッパーdivを避けたいと私はながらの後だけど、そこに持っていないだろうとまだボタンを整列させてフレックスアライメントとここautoマージンについて

<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

より：は、このようなものです、あなたがここに探しているMethods for Aligning Flex Items

Answer 2

プロパティが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>