Hacer que un artículo 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, quiero simplemente hacer flotar el artículo hacia la derecha.

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

¿Es esto algo posible?

Si no es así, ¿cómo hago un float: rightunder flex?

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

Entonces, si desea colocar el childelemento a la derecha del parentelemento, puede usarlo, margin-left: autopero ahora el childelemento también empujará a otro divhacia la derecha, como puede ver aquí Fiddle.

Lo que puede hacer ahora es cambiar el orden de los elementos y establecer order: 2el childelemento para que no afecte al 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>

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

Tampoco necesita posicionamiento CSS.

Hay varios métodos flexibles disponibles. autolos márgenes se han mencionado en otra respuesta .

Aquí hay otras dos opciones:

• Uso justify-content: space-betweeny orderpropiedad.
• Utilice justify-content: space-betweene 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>