Faire que deux éléments se comportent comme des éléments flottants sans utiliser la propriété css float

Question

Je souhaite aligner horizontalement deux éléments sans en utilisant le flottant de la propriété css.

Pour être plus spesific:

Je veux qu'ils soient alignés horizontalement, flottant sur chaque côté du parent:

Et, si l'écran devient plus petit, je les veux enrouler en dessous de l'autre tout en flottant sur chaque côté de la mère (comme avec flotteur):

Est-ce possible d'utiliser flexbox ou quelque chose comme ça?

Answer 1

Je ne suis pas au courant d'une façon de faire les côtés gauche et d'échange de droits basé uniquement sur une propriété d'un enfant élément comme un réel float, sans spécifier flex-direction:row-reverse; sur le wrapper. Voir mon exemple pour une comparaison: 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

1er propriété:

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

propriété 2 (requête média ajouté pour certains résolution):

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

margin-left: auto et marge droite: auto fonctionne comme un flotter pour une flexbox.

AUTRES IDÉE DE LA VERSION SENSIBLE:

.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