Come allineare a destra l'elemento flessibile?

682

Esiste un modo più flessibile di allineare il "contatto" rispetto all'utilizzo position: absolute?

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { position: absolute; right: 0; }

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>

Espandi frammento

http://jsfiddle.net/vqDK9/

html css flexbox

— Mark Boulder
fonte

2

puoi usare float a destra, ma è allo stesso modo ...! Il modo migliore è usare una tabella di visualizzazione con text-align.

— Yohann Tilotti,

Certo, se è meglio. Ancora problemi nel "contatto" di allineamento a destra: jsfiddle.net/vqDK9/1

— Mark Boulder

2

Ho aggiornato il tuo violino jsfiddle.net/vqDK9/2

— Yohann Tilotti

Ecco almeno due modi per farlo: stackoverflow.com/a/33856609/3597276

— Michael Benjamin

455

Ecco qui. Posizionato justify-content: space-betweensul contenitore flessibile.

.main { 
    display: flex; 
    justify-content: space-between;
  }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
<!--     <div class="b"><a href="#">Some title centered</a></div> -->
    <div class="c"><a href="#">Contact</a></div>
</div>

Espandi frammento

— Kevin Suttle
fonte

291

Oppurejustify-content: flex-end

— BT

1

Prova a impostare la larghezza di .c su 300px. Il titolo non è più centrato. Quindi sì, questo risponde alla domanda, ma questo rompe il design.

— Agamemnus,

23

Nota che questo non funziona sempre come ti aspetti, come quando c'è uno .c::afterpseudo-elemento. Nella mia esperienza, margin-left: auto;è la strada da percorrere.

— Sarà il

13

Oppureflex-flow: row-reverse;

— jchook,

8

Non vedo che questa sia una risposta corretta se non vuoi allineare un solo elemento in un contenitore flessibile.

— Foxhoundn,

1098

Un approccio più flessibile sarebbe quello di utilizzare un automargine sinistro (gli elementi flessibili trattano i margini automatici in modo leggermente diverso rispetto a quando vengono utilizzati in un contesto di formattazione dei blocchi).

.c {
    margin-left: auto;
}

Fiddle aggiornato:

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}

<h2>With title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>
<h2>Without title</h2>
<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <!--<div class="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

Espandi frammento

— alla deriva
fonte

2

Grazie. Preferiresti personalmente questo rispetto al metodo della tabella di visualizzazione di Yohann Tilotti sopra? Se è così, perché?

— Mark Boulder,

4

@MarkBoulder: per motivi di compatibilità, il suo metodo è migliore, ma se stai già utilizzando Flexbox la mia risposta avrebbe più senso.

— deriva il

4

@MarkBoulder: entrambi realizzano la stessa cosa in questo caso. Il vantaggio sarebbe avere altre proprietà (e il comportamento) associate agli elementi di flessione che l'approccio tavolo non ha ( flex, order, ecc).

— deriva il

3

Se non puoi avvolgere gli elementi e devi galleggiare, dì gli ultimi tre a destra, scegli il terzo dall'ultimo solo con questo margin-left: auto;stile.

— Daniel Sokolowski il

2

@Justin l'ha capito, non c'è bisogno di avvolgerli - nel mio caso non ho potuto. La soluzione era quella di scegliere come target solo il primo dei tre elementi margin-left: auto;.

— Daniel Sokolowski il

41

Se vuoi usare flexbox per questo, dovresti essere in grado, facendo questo ( display: flexsul contenitore, flex: 1sugli articoli e text-align: rightsu .c):

.main { display: flex; }
.a, .b, .c {
    background: #efefef;
    border: 1px solid #999;
    flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }

... o in alternativa (anche più semplice), se gli articoli non devono essere rispettati, è possibile utilizzare justify-content: space-betweensul contenitore e rimuovere text-aligncompletamente le regole:

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

Ecco una demo su Codepen per permetterti di provare rapidamente quanto sopra.

— Nick F
fonte

2

space-betweenera esattamente quello che stavo cercando, grazie!

— Eddie Fletcher,

I bordi scompaiono quando si utilizza il secondo suggerimento, il comportamento previsto? codepen.io/oshihirii/pen/RygKRd

— user1063287

38

Puoi anche usare uno stucco per riempire lo spazio rimanente.

<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

.filler{
    flex-grow: 1;
}

Ho aggiornato la soluzione con 3 diverse versioni. Ciò a causa della discussione sulla validità dell'utilizzo di un elemento di riempimento aggiuntivo. Se esegui il codice snipped vedi che tutte le soluzioni fanno cose diverse. Ad esempio, impostando la classe di riempimento sull'elemento b, questo elemento riempirà lo spazio rimanente. Questo ha il vantaggio che non c'è spazio "morto" che non è cliccabile.

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="filler"></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<div class="mainfiller">
    <div class="a"><a href="#">Home</a></div>
    <div class="filler b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>



<div class="main">
    <div class="a"><a href="#">Home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>

Espandi frammento

— Arno
fonte

3

Finalmente qualcuno che capisce flexbox

— Kokodoko

9

@Kokodoko sì, usare un altro elemento html non semantico per spostare un altro elemento è il massimo della comprensione del flexbox ...

— Zanshin13

@ Zanshin13 Le altre risposte tutte scrivono così tanti extra che potresti anche lasciare fuori il contenitore flessibile e codificare tutto da te :)

— Kokodoko

2

@Kokodoko justify-content: space-betweenè "così tanto" css, sul serio? Non c'è bisogno di ulteriori commenti (ma se vuoi - benvenuti a chattare). Questa risposta ha il diritto di essere qui, perché è una soluzione. Ma sicuramente non ottimale. Idk, forse non te ne sei accorto, ma la maggior parte dei CSS di altre risposte sono OP e le risposte in realtà riducono (un po ') la quantità di CSS dell'autore. Questa risposta non ha meno css di altri (non funzionerà senza css di OP - jsfiddle.net/63ma3b56 ). Ma ha un altro elemento html.

— Zanshin13,

32

O potresti semplicemente usare justify-content: flex-end

.main { display: flex; }
.c { justify-content: flex-end; }

— Melchia
fonte

3

L' justify-contentattributo è un attributo del contenitore flessibile, vedere il cheatheet

— Klaas van der Weij

1

Questa è l'unica soluzione in questa pagina che ha funzionato per me.

— user2847376

19

Facile come

.main {
    display: flex;
    flex-direction:row-reverse;
}

— CESCO
fonte

12

Aggiungi la seguente classe CSS al tuo foglio di stile:

.my-spacer {
    flex: 1 1 auto;
}

Posiziona un elemento vuoto tra l'elemento a sinistra e l'elemento che desideri allineare a destra:

<span class="my-spacer"></span>

— andreisrob
fonte

Per coloro che non vogliono semplicemente allineare a destra un singolo elemento, ma potrebbero voler allineare a sinistra un elemento e allineare a destra un altro (all'interno dello stesso layout flessibile) questa è la strada da percorrere!

— Sensei James,

8

Se hai bisogno di un elemento da allineare a sinistra (come un'intestazione) ma poi più elementi allineati a destra (come 3 immagini), allora faresti qualcosa del genere:

h1 {
   flex-basis: 100%; // forces this element to take up any remaining space
}

img {
   margin: 0 5px; // small margin between images
   height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}

Ecco come apparirà (solo il CSS relavent è stato incluso nello snippet sopra)

— TetraDev
fonte

6

'justify-content: flex-end' ha funzionato all'interno del contenitore del prezzo.

.price-box {
    justify-content: flex-end;
}

— Mohammad Adeel
fonte

4

Trovo che l'aggiunta di "justify-content: flex-end" al contenitore flessibile risolva il problema mentre "justify-content: space-between" non fa nulla.

— notti
fonte

2

Per coloro che utilizzano Angular e Flex-Layout, utilizzare quanto segue sul contenitore di oggetti flessibili:

<div fxLayout="row" fxLayoutAlign="flex-end">

Consulta qui i documenti fxLayoutAlign e i documenti completi fxLayout qui .

— Lindauson
fonte

0

Codice di esempio basato sulla risposta di TetraDev

Immagini a destra:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <h1>Secure Payment</h1>
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
</div>

Espandi frammento

Immagini a sinistra:

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
  text-align: right;
}

img {
  margin: 0 5px;
  height: 30px;
}

<div class="main">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <h1>Secure Payment</h1>
</div>

Espandi frammento

— 1,21 gigawatt
fonte