Esnek öğeyi sağa hizalama

681

Kullanmaktan daha fazla "İletişim" sağa hizalamanın daha esnek bir yolu var position: absolutemı?

.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>

Snippet'i genişlet

http://jsfiddle.net/vqDK9/

html css flexbox

— Mark Boulder
kaynak

2

şamandırayı doğru kullanabilirsiniz, ama aynı şekilde ...! En iyi yol, metin hizalamalı bir görüntü tablosu kullanmaktır.

— Yohann Tilotti

Tabii, eğer daha iyiyse. Yine de "Kişi" yi sağa hizalamada sorun yaşıyorum: jsfiddle.net/vqDK9/1

— Mark Boulder

2

Ben keman jsfiddle.net/vqDK9/2

— Yohann Tilotti

İşte bunu yapmanın en az iki yolu: stackoverflow.com/a/33856609/3597276

— Michael Benjamin

454

Hadi bakalım. Set justify-content: space-betweenesnek ambalaj üzerinde.

.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>

Snippet'i genişlet

— Kevin Suttle
kaynak

291

Veyajustify-content: flex-end

— BT

1

.C genişliğini 300 piksele ayarlamayı deneyin. Başlık artık ortalanmıyor. Yani evet, bu soruya cevap veriyor, ancak bu tasarımı kırıyor.

— Agamemnus

22

Bunun her zaman beklediğiniz şekilde çalışmadığını unutmayın, örneğin bir .c::aftersözde öğe olduğunda. Benim deneyimime göre, margin-left: auto;gitmenin yolu bu.

— Will

13

Veyaflex-flow: row-reverse;

— jchook

8

Esnek bir kapta yalnızca bir öğeyi hizalamak istemiyorsanız, bunun doğru bir yanıt olduğunu görmüyorum.

— Foxhoundn

1097

Daha esnek bir yaklaşım, bir autosol kenar boşluğu kullanmak olacaktır (esnek öğeler otomatik kenar boşluklarını bir blok biçimlendirme bağlamında kullanıldığından biraz farklı şekilde ele alır).

.c {
    margin-left: auto;
}

Güncellenmiş keman:

.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>

Snippet'i genişlet

— başıboş
kaynak

2

Teşekkürler. Kişisel olarak yukarıdaki Yohann Tilotti'nin görüntü tablosu yöntemine tercih eder misiniz? Öyleyse neden?

— Mark Boulder

4

@ MarkBoulder: Uyumluluk nedenlerinden dolayı yöntemi daha iyidir, ancak flexbox kullanıyorsanız cevabım daha mantıklı olacaktır.

— adrift

4

@ MarkBoulder: Bu durumda ikisi de aynı şeyi başarıyor. Avantaj (tablo yaklaşımı yok esnek öğeleri ile ilişkili diğer özellikleri (ve davranış) sahip olacaktır flex, ordervs).

— adrift

3

Elemanları satamıyorsanız ve son üç hakkı söylediğinizde yüzmeniz gerekiyorsa, bu margin-left: auto;stil ile sonuncudan 3. tanesini hedefleyin .

— Daniel Sokolowski

2

@ Justin bunu anladı, sarmaya gerek yok - Benim durumumda yapamadım. Çözüm, sadece üç öğenin ilkini hedeflemekti margin-left: auto;.

— Daniel Sokolowski

41

Bunun için flexbox kullanmak istiyorsanız, bunu yaparak ( display: flexkapta, flex: 1eşyalarda ve text-align: rightüzerinde .c) şunları yapabilmeniz gerekir :

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

... veya alternatif olarak (daha basit), öğelerin karşılanması gerekmiyorsa justify-content: space-between, kapta kullanabilir ve text-alignkuralları tamamen kaldırabilirsiniz :

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

Hızlı bir şekilde yukarıdakileri denemenize izin vermek için Codepen hakkında bir demo .

— Nick F
kaynak

2

space-betweentam olarak aradığım şeydi, teşekkürler!

— Eddie Fletcher

İkinci öneri, beklenen davranış kullanılırken sınırlar kayboluyor mu? codepen.io/oshihirii/pen/RygKRd

— user1063287

38

Kalan alanı doldurmak için bir dolgu da kullanabilirsiniz.

<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;
}

Çözümü 3 farklı sürümle güncelledim. Bu, ek bir dolgu elemanı kullanılmasının geçerliliğinin tartışılması nedeniyle. Snip kodunu çalıştırırsanız, tüm çözümlerin farklı şeyler yaptığını görürsünüz. Örneğin, dolgu sınıfının b maddesine ayarlanması, bu maddenin kalan alanı doldurmasını sağlayacaktır. Bunun, tıklanamayan 'ölü' alan olmaması avantajı vardır.

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

Snippet'i genişlet

— Arno
kaynak

3

Sonunda flexbox'ı anlayan biri

— Kokodoko

9

@Kokodoko evet, başka bir öğeyi taşımak için bir anlamsal olmayan html öğesi kullanmak flexbox'ı anlamanın en tepesi ...

— Zanshin13

@ Zanshin13 Diğer cevaplar o kadar çok ekstra css yazabilirsiniz ki, aynı zamanda esnek kabı dışarıda bırakabilir ve her şeyi kendiniz

— kodlayabilirsiniz

2

@Kokodoko cidden justify-content: space-between"çok" css mi? Daha fazla yoruma gerek yok (ama isterseniz - sohbete hoş geldiniz). Çünkü bu cevap, burada olma hakkına sahiptir olduğu bir çözüm. Ama kesinlikle uygun değil . Idk, belki fark etmedin ama başka cevaplardan gelen css çoğu OP'ler ve cevaplar aslında yazarın css miktarını (biraz) azaltır. Bu cevabın diğerlerinden daha az css'si yoktur (OP's css olmadan çalışmaz - jsfiddle.net/63ma3b56 ). Ancak bir tane daha html öğesi var.

— Zanshin13

32

Ya da sadece justify-content: flex-end

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

— Melchia
kaynak

3

justify-content: Nitelik esnek-kabın bir niteliktir, Chris coyer en flexy Pardus bkz css-tricks.com/snippets/css/a-guide-to-flexbox

— Weij der Klaas van

1

Bu sayfada benim için çalışan tek çözüm bu.

— user2847376

19

Kadar kolay

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

— CESCO
kaynak

12

Stil sayfanıza aşağıdaki CSS sınıfını ekleyin:

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

Soldaki öğe ile sağa hizalamak istediğiniz öğe arasına boş bir öğe yerleştirin:

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

— andreisrob
kaynak

Yalnızca tek bir öğeyi sağa hizalamak istemeyen, ancak bir öğeyi sola hizalamak ve başka bir öğeyi (aynı esnek düzen içinde) sağa hizalamak isteyenler için bu yol!

— Sensei James

8

Bir öğenin sola hizalanması (başlık gibi), ancak birden çok öğenin sağa hizalanması (3 resim gibi) gerekiyorsa, şöyle bir şey yaparsınız:

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
}

İşte neye benzeyecek (yukarıdaki kod parçasına yalnızca ilgili CSS dahil edildi)

— TetraDev
kaynak

6

'justify-content: flex-end' fiyat kutusu kabı içinde çalıştı.

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

— Mohammad Adeel
kaynak

4

'Justify-content: space-between' hiçbir şey yapmazken flex konteynere 'justify-content: flex-end' eklemenin sorunu çözdüğünü fark ettim.

— geceler
kaynak

2

Açısal ve Esnek Düzen kullananlar için, esnek öğe kabında aşağıdakileri kullanın:

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

FxLayoutAlign dokümanlar bakın burada ve tam fxLayout dokümanlar burada .

— Lindauson
kaynak

0

Dayalı Örnek kod cevapTetraDev'in

Sağdaki resimler:

* {
  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>

Snippet'i genişlet

Soldaki resimler:

* {
  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>

Snippet'i genişlet

— 1.21 gigawatt
kaynak