Lassen Sie zwei Elemente sich wie Floating-Elemente verhalten, ohne die CSS-Eigenschaft zu verwenden float

Question

Ich möchte zwei Elemente ohne mithilfe der CSS-Eigenschaft float ausrichten.

Um mehr spesific sein:

Ich mag, dass sie horizontal ausgerichtet werden, auf jede Seite der Mutter Floating:

Und wenn der Bildschirm kleiner wird, möchte ich sie wickeln untereinander während sie noch an jeder Seite der schwimmenden Mutter (wie mit float):

Ist dies mit Flexbox oder ähnlichem möglich?

Answer 1

Ich bin einer Art und Weise nicht bewusst, die linken und rechten Swap-Seiten auf nur eine Eigenschaft eines Kindes basiert zu machen Element wie ein echter Float tut, ohne flex-direction:row-reverse; auf dem Wrapper zu spezifizieren. Siehe mein Beispiel für einen Vergleich: 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. Eigenschaft:

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

zweite Eigenschaft (Medienabfrage für bestimmte Auflösung hinzugefügt):

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

margin-left: auto und margin-right: auto funktioniert wie ein schweben für eine Flexbox.

ANDERE IDEE FÜR DIE RESPONSIVE 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