Tek bir esnek kutu öğesi nasıl yaslanır (yaslama içeriğini geçersiz kıl)

283

Esnek bir öğe için align-itemsile geçersiz kılabilirsiniz align-self. justify-contentEsnek bir öğeyi geçersiz kılmanın bir yolunu arıyorum .

Bir flexbox konteyneriniz varsa justify-content:flex-end, ancak ilk öğenin olmasını istiyorsanız, justify-content: flex-startbu nasıl yapılabilir?

Bu en iyi bu gönderiye cevap verdi: https://stackoverflow.com/a/33856609/269396

css flexbox

— Mahks
kaynak

2

autoKenar boşluklarını kullanın . 26 numaralı kutuya bakın: stackoverflow.com/a/33856609/3597276

— Michael Benjamin

En yararlı cevaba bağlantı verdiğiniz için teşekkür ederiz!

— Brady Dowling

549

Orada olmak görünmüyor justify-self, ancak benzer sonuç uygun olan ayarı elde edebilirsiniz marginetmek auto¹. Örneğin. için flex-direction: row(varsayılan) Eğer belirlesin margin-right: autosola çocuğu hizalamak.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}

<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

Snippet'i genişlet

Behavior Bu davranış Flexbox spesifikasyonu tarafından tanımlanır .

— Pavlo
kaynak

51

Bu teknik mükemmeldir ve dikey yönde de çalışır. Örneğin, sabit yükseklikteki bir kabın içindeki son öğenin tabana yapışmasını istiyorsunuz. `` .Container {esnek yön: sütun; justify-content: flex-start} .last-item {margin-top: auto} ``

— Christian Schlensker

6

@krulik Bu davranış Flexbox spesifikasyonu tarafından tanımlanır, bkz. w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins

— Pavlo

7

Biraz daha araştırma yaptıktan sonra, justify-selfbununla ilgisi olmayabilir ama onunla flexboxbirlikte kullanılır css gridsama emin değilim. Flexbox ile Chrome'da çalışmasını sağlayamıyorum.

— Jake Wilson

8

Bir öğenin solda, diğerinin ortada olmasını istersem ne olur?

— Fahmi

3

"Flexbox mizanpajlarında, bu özellik göz ardı edilir" -kendine-ben üzerinde mozilla dokümanlar alınan

— Finlay Percy

19

AFAIK, özelliklerde bunun için bir özellik yok, ancak burada kullandığım bir hile var: konteyner öğesini (ile display:flex) ayarlayın justify-content:space-around Daha sonra birinci ve ikinci öğe arasına ekstra bir öğe ekleyin ve flex-grow:10(veya bazılarına) kurulumunuzla çalışan diğer değerler)

Düzenleme: öğeler sıkıca hizalanmışsa flex-shrink: 10;, ekstra öğeye de eklemek iyi bir fikirdir , böylece düzen daha küçük cihazlarda düzgün şekilde yanıt verir.

— eeglbalazs
kaynak

1

Genişlik belirtmeden çalışır (en azından benim

— durumumda yaptı

Deneyinmin-width: 0

— The Dembinski

13

Aslında bu öğelerin tümünü kardeş düğüm olarak tutmakla sınırlı değilseniz, başka bir varsayılan esnek kutuda bir araya gelen öğeleri sarabilir ve her ikisinin de kabını aralarında boşluk kullanabilirsiniz.

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

Snippet'i genişlet

Ya da flex-start ve flex-end tersiyle aynı şeyi yapıyorsanız, varsayılan flex kabının ve yalnız çocuğun sırasını değiştirirsiniz.

— borkxs
kaynak

5

justify-selfYakında tarayıcılara geliyor gibi görünüyor . MDN hakkında zaten bir makale var . Bu yazı yazıldığı sırada tarayıcı desteği zayıftır.

Marj çözümüyle ilgili olarak: Boşlukları olan bir Flexbox ızgaram var. Hiçbir yoktur flex-gapflexbox'a ile (henüz?) Özelliği. Oluklar için, dolgu ve kenar boşlukları kullanıyorum, bu yüzden margin: autodiğer kenar boşluklarının üzerine yazılması gerekiyor ...

— Frank Lämmer
kaynak

7

Ne yazık ki,In flexbox layouts, this property is ignored

— Sphinxxx

1

Evet @Sphinxxx ama justify-self does bir iş display: gridkonteyner. O kadar gibi zengin konumlandırma sağlayan, flexbox'a gibi son var align-items, align-self, gibi yanı sıra bazı ek özellikler biz burada gerekmez justify-self. Tavsiye ettiğim şey, yeterli olan yerlerde flexbox kullanmaktır, ancak bir şey yoksa, ızgara büyük olasılıkla aradığınıza sahiptir. (örneğin, bir çocuğu orta-x ve orta-y ve diğerini sağ-x orta-y margin-left: autoile kolayca hizalama - flexbox kolay sol + sağa sahiptir, ancak orta + sağa sahiptir) Örnek: stackoverflow.com/a/57128453 24241655

— Venryx

1

Yapmanız öğelerin genişliği isteyen durumlar için flex-endbilinir, "0 0 ## px" kendi esnemesi ayarlamak ve istediğiniz öğeyi ayarlayabilirsiniz flex-startileflex:1

Bu, sözde flex-startöğenin kabı doldurmasına neden olur , sadece onu biçimlendirir text-align:leftya da her neyse.

— Mahks
kaynak

0

İç öğenin stilini ayarlayarak benzer bir durumu çözdüm margin: 0 auto.
Durum: Menümde genellikle üç düğme bulunur, bu durumda olmaları gerekir justify-content: space-between. Ancak tek bir düğme olduğunda, artık sol yerine ortalanmış olarak hizalanacaktır.

— Mikrosaniye
kaynak