使兩個元素表現得像浮動元素不使用CSS屬性浮動

Question

我想使用CSS屬性浮動水平對齊兩個元素沒有。

更spesific：

我希望他們能夠在水平方向排列，浮於母公司每側：

而且，如果屏幕變小，我希望他們裹相互的下方，同時仍然漂浮到母體的每一側（如使用浮動）：

這可能實現使用flexbox或類似的東西？

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

1屬性：

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

第二屬性（媒體查詢添加某些分辨率）：

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

保證金左：自動和保證金權：汽車作品像爲flexbox浮動。

其他的想法出迴應VERSION：

.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