Flexbox: her iki tarafta uzayda bulunan elemanlar içeren ortalanmış eleman

Question

Çeşitli genişliklerde yedi adet <li> öğeden oluşan bir menü oluşturmak için flexbox kullanıyorum. <li> öğesinin ortalamasını (ortasına göre), her zaman yatay olarak ortalanmış bir çapa olarak ortalamak istiyorum, ortadaki <li>'un solundaki boşluğu işgal eden 1-31 <li> öğelerini ve 5.-7. sağdaki boşluk.

ben merkeze çalışıyorum <li> elemana ebeveyn esnek ambalaj üzerinde space-around, space-between yanı sıra align-self: center çalıştı, ancak şu ana kadar hiçbir şans ettik. Esnek kutuda bilgili birisinin yardımları takdir edilecektir.

jsfiddle

Answer 1

Sen nav yapısını değiştirmek ve sol 3 konteynerler, merkez ve sağ den başlamak gerekir. DEMO

---

HTML

sağ birkaç bağlantı yapacak ve sol merkezi bir bağlantıdır.

<nav> 
<span> 
    <a href="#">aaa </a> 
    <a href="#">aa </a> 
    <a href="#">a </a> 
    </span> 
    <a href="#"> center </a> 
    <span> 
     <a href="#">bbbb </a> 
     <a href="#">bbbbb </a> 
     <a href="#">bbbbbb </a> 
    </span> 
</nav> 

---

CSS

nav display:flex ve justify-content:space-between alacak, böylece irade ve sağ bıraktı.

nav, nav span { 
    display:flex; 
    justify-content:space-between; 
    flex-wrap:wrap;/* so they do not overlap each other if space too short */ 
} 

sadece bir sözde elemanı (ya da boş bir öğesi) ekleyin merkezine doğru sola doğru ve kenarlarında bir aralık oluşturmak için.

span:first-of-type:after, 
span:last-of-type:before{ 
    content:''; 
    display:inline-block;/* enough , no width needed , it will still generate a space between */ 
} 

sağ çok fazla genişletmek için merkezini önlemek için, bir flex değerini 1 daha yüksek alabilir ve bıraktı.

nav > span { 
    flex:2; /* 2 is minimum but plenty enough here */ 
} 

eden bağlantı kutuları çizmek olanak tanır:

a { 
    padding:0 0.25em; 
    border:solid; 
} 

---

DEMO

Answer 2

Bunu yapmanın yolu üç farklı ul unsurları içine öğeleri bölmek olduğunu düşünüyorum ve Daha sonra üç sütunun ne kadar büyük olduğunu ayarlamak için flex özelliğini kullanın.

Dış sütunların içlerinde üç öğe vardır, böylece flex:3 elde edilir. Merkezlenmiş sütunun yalnızca bir öğesi vardır, bu yüzden flex:1 alır. Bu şekilde, yeniden boyutlandırdığınızda, flexbox daha büyük sütunlar için 3 esnek birimi ve ortalanmış sütun için 1 esnek birimi kullanır. Sütunlardan herhangi birinde farklı sayıda öğe kullanmanız gerekiyorsa, içinde kaç öğe olduğunu yansıtmak için flex birimini değiştirin. sağ ve sol blokta `; 2:

Çalışma keman: jsfiddle