Hacer que un elemento flexible flote a la derecha

Tengo un

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div> another child </div>
</div>

El padre tiene

.parent {
    display: flex;
}

Para mi primer hijo, simplemente quiero flotar el elemento a la derecha.

Y mis otros divs para seguir la regla flex establecida por el padre.

Es esto algo posible?

Si no, ¿cómo hago un float: right bajo flex?

Author: Michael_B, 2016-03-23
Source

3 answers

No puede usar float dentro de contenedor flexible y la razón es que la propiedad float no se aplica a las cajas de nivel flexible como puede ver aquí Fiddle.

Así que si quieres posicionar el elemento child a la derecha del elemento parent puedes usar margin-left: auto pero ahora el elemento child también empujará otro div a la derecha como puedes ver aquí Fiddle.

Lo que puede hacer ahora es cambiar el orden de los elementos y establecer order: 2 en el elemento child para que no afectar segundo div

.parent {
  display: flex;
}
.child {
  margin-left: auto;
  order: 2;
}
<div class="parent">
  <div class="child">Ignore parent?</div>
  <div>another child</div>
</div>
 54
Author: Nenad Vracar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-23 18:07:19

No necesitas flotadores. De hecho, son inútiles porque los flotadores son ignorados en flexbox.

Tampoco necesita posicionamiento CSS.

Hay varios métodos flex disponibles. auto los márgenes han sido mencionados en otra respuesta.

Aquí hay otras dos opciones:

  • Use justify-content: space-between y la propiedad order.
  • Use justify-content: space-between e invierta el orden de los divs.

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

.parent:first-of-type > div:last-child { order: -1; }

p { background-color: #ddd;}
<p>Method 1: Use <code>justify-content: space-between</code> and <code>order-1</code></p>

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div>another child </div>
</div>

<hr>

<p>Method 2: Use <code>justify-content: space-between</code> and reverse the order of 
             divs in the mark-up</p>

<div class="parent">
    <div>another child </div>
    <div class="child" style="float:right"> Ignore parent? </div>
</div>
 10
Author: Michael_B,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-19 21:28:40 

.parent {
  display: flex;
}
.child {
  margin-left: auto;
  order: 2;
}
<div class="parent">
  <div class="child">Ignore parent?</div>
  <div>another child</div>
</div>

Podemos prescindir del margen-izquierda

 0
Author: bhargavi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-20 06:01:23