Hacer que un artículo flexible flote a la derecha

103

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?

html css flexbox Zhen Liu
fuente

Respuestas:

194

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>
Expandir fragmento

Nenad Vracar
fuente
Gracias, puedo echar un vistazo a la primera solución. No quiero usar display: absolute ya que mis otros hijos no deberían estar cubiertos por el primer hijo.
Zhen Liu
4
"los flotadores no se entrometen en el contenedor flexible ". Eso es cierto, pero no es la razón. La razón es que la floatpropiedad no se aplica a las cajas de nivel flexible.
Oriol
¡Esto funciona, gracias! ¿Por qué justify-self: end;(o algo similar) no funciona para el niño? Esto parece una solución no tan flexible para un problema de flexbox.
Brady Dowling
1
@BradyDowling Sé que esta es una respuesta tardía, pero justify-self end requiere que la pantalla esté configurada en una cuadrícula. Los Flexboxes ignorarán justify-self: end. Vea aquí: developer.mozilla.org/en-US/docs/Web/CSS/justify-self
Paul
<div> otro niño </div> <div class = "niño"> ¿Ignorar al padre? </div> U puede intercambiar los dos div y sin el orden 2 también funciona
yeeen
23

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>
Expandir fragmento

Michael Benjamin
fuente