cssプロパティfloatを使用せずに2つの要素を浮動要素のように動作させる

Question

の2つの要素を水平方向に整列させたい場合は、CSSプロパティfloatを使用してを使用します。

よりspesific的には：

私は親のそれぞれの側に浮き、それらを水平に整列させたい：

そして、画面が小さくなれば、私は彼らがしたいです依然として（フロートと同じように）親の各側に浮遊しながら、お互いの下にラップ：

フレックスボックスなどを使ってこれを実現することはできますか？

Answer 1

私が子供の唯一のプロパティに基づいて、左と右のスワップ両側を作るための方法を認識していませんよラッパーにflex-direction:row-reverse;を指定せずに、実際の浮動小数点のような要素がします。比較のために私の例を参照してください：私の後http://codepen.io/ijstanley/pen/JWXwOy

<p>pseudo floats in reverse order in markup</p> 
<div class="flex wrapper"> 
    <div class="pseudo float right">right</div> 
    <div class="pseudo float left">left</div> 
</div> 
<p>pseudo floats in correct order in markup</p> 
<div class="flex wrapper"> 
    <div class="pseudo float left">left</div> 
    <div class="pseudo float right">right</div> 
</div> 
<p>pseudo floats in reverse order in markup, reverse flex direction</p> 
<div class="reverse flex wrapper"> 
    <div class="pseudo float right">right</div> 
    <div class="pseudo float left">left</div> 
</div> 
<p>pseudo floats in correct order in markup, reverse flex direction</p> 
<div class="reverse flex wrapper"> 
    <div class="pseudo float left">left</div> 
    <div class="pseudo float right">right</div> 
</div> 
<p>actual floats</p> 
<div class="floater wrapper"> 
    <div class="real float left">left</div> 
    <div class="real float right">right</div> 
</div> 

---

.wrapper { 
    border:3px solid gray; 
} 

.wrapper.flex { 
    display:flex; 
    flex-direction:row; 
    flex-wrap:wrap; 
    justify-content:space-between; 
} 

.wrapper.flex.reverse { 
    flex-direction:row-reverse; 
} 

.wrapper.floater { 
    width:100%; 
} 

.wrapper.floater::after { 
    content:''; 
    display:block; 
    clear:both; 
} 

.float { 
    min-height:200px; 
    background:red; 
    border:3px solid black; 
    width:300px; 
} 

.float.pseudo.left { 
    margin-right:auto; 
} 

.float.real.left { 
    float:left; 
} 

.float.real.right { 
    float:right; 
} 

Answer 2

第一プロパティ：

.container{ 
    display: flex; 
    justify-content: space-between; 
} 

第二プロパティ（メディアクエリは、特定の解像度のための追加）：

.container{ 
    flex-direction: column; 
} 
.1stDiv{ 
    margin-right: auto; 
} 
.2ndDiv{ 
    margin-left: auto; 
} 

マージン左：オートとマージン右：自動作品のようなflexboxのために浮動。

応答性VERSION FOR

他IDEA：

.container{ 
     flex-direction: column; 
    }  
.1stDiv{ 
    align-self: flex-start; 
} 
.2ndDiv{ 
    align-self: flex-end; 
} 

Answer 3

#first{ 
    width:50px; 
    height:50px; 
    position:absolute; 
    left:0px; 
    right:auto; 
    top:0px; 
    background-color:red; 
} 

#second{ 
    width:50px; 
    height:50px; 
    position:absolute; 
    left:auto; 
    right:0px; 
    top:0px; 
    background-color:green; 
} 

Fiddle link