Jak uzasadnić pojedynczy element Flexbox (zastąp treść justify-content)

283

Możesz zastąpić align-items z align-selfdo elastycznego elementu. Szukam sposobu na zastąpienie justify-contentelementu flex.

Jeśli miałeś pojemnik Flexbox justify-content:flex-end, ale chcesz, aby był to pierwszy elementjustify-content: flex-start , jak można to zrobić?

Najlepiej na to odpowiedział ten post: https://stackoverflow.com/a/33856609/269396

css flexbox Mahks
źródło
2
Użyj automarginesów. Zobacz ramkę nr 26 tutaj: stackoverflow.com/a/33856609/3597276
Michael Benjamin
Dziękujemy za link do najbardziej pomocnej odpowiedzi!
Brady Dowling

Odpowiedzi:

549

Wydaje się justify-self, że tak nie jest , ale można osiągnąć podobne ustawienie wyników odpowiednie margindla auto¹. Np. dla flex-direction: row(domyślnie) powinieneś ustawić margin-right: autowyrównanie dziecka do lewej.

.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>
Rozwiń fragment kodu

¹ To zachowanie jest zdefiniowane w specyfikacji Flexbox .

Pavlo
źródło
51
Ta technika jest doskonała i działa również w kierunku pionowym. Na przykład chcesz, aby ostatni element w pojemniku o stałej wysokości przykleił się do dna. Możesz użyć `` .container {flex-direction: column; justify-content: flex-start} .last-item {margin-top: auto} ``
Christian Schlensker
6
@krulik To zachowanie jest zdefiniowane przez specyfikację Flexbox, patrz w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins
Pavlo
7
Po kilku dalszych badaniach justify-selfmoże nie mieć z tym nic wspólnego, flexboxale raczej jest używany, css gridsale nie jestem pewien. Wydaje mi się, że nie mogę go uruchomić w Chrome z Flexboksem.
Jake Wilson
8
Co jeśli chcę, aby jeden przedmiot znajdował się po lewej, a drugi pośrodku?
Fahmi
3
„W układach Flexbox ta właściwość jest ignorowana” - wzięto z dokumentacji Mozilli na justify-self
Finlay Percy
19

AFAIK nie ma takiej właściwości w specyfikacjach, ale oto sztuczka, której używałem: ustaw element kontenera (ten z display:flex), aby justify-content:space-around następnie dodać dodatkowy element między pierwszym a drugim elementem i ustaw go na flex-grow:10(lub niektóre inna wartość, która działa z twoją konfiguracją)

Edycja: jeśli elementy są ściśle wyrównane, dobrym pomysłem jest również dodanie flex-shrink: 10;do dodatkowego elementu, aby układ odpowiednio reagował na mniejszych urządzeniach.

eeglbalazs
źródło
1
Działa bez określania szerokości (przynajmniej w mojej sytuacji)
eeglbalazs
Spróbujmin-width: 0
The Dembinski
13

Jeśli tak naprawdę nie jesteś ograniczony do zachowania tych wszystkich elementów jako węzłów rodzeństwa, możesz owinąć te, które pasują do siebie, w innym domyślnym polu elastycznym, a kontener obu będzie używał spacji między nimi.

.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>
Rozwiń fragment kodu

Lub jeśli robisz to samo z Flex-Start i Flex-End Reverse, po prostu zamienisz kolejność domyślnego kontenera Flex i samotnego dziecka.

borkxs
źródło
5

Wygląda na justify-selfto, że wkrótce będzie dostępny w przeglądarkach . Jest już artykuł na ten temat na MDN . W chwili pisania tego tekstu obsługa przeglądarki jest słaba.

Jeśli chodzi o rozwiązanie marży: mam siatkę Flexbox z przerwami. Brak flex-gapFlex (jeszcze?) W Flexbox. Więc dla rynien używam obić i marginesów, więc muszę margin: autozastąpić inne marginesy ...

Frank Lämmer
źródło
7
Niestety,In flexbox layouts, this property is ignored
Sphinxxx
1
@Sphinxxx Tak, ale justify-self nie pracę w display: gridpojemniku. To ostatnie jak schematu flexbox, więc umożliwia pozycjonowanie jak bogaty align-items, align-selfjak również pewne dodatkowe funkcje, takie jak ten, musimy tutaj justify-self. Zalecam korzystanie z Flexboksa wszędzie tam, gdzie jest to wystarczające, ale jeśli czegoś brakuje, grid najprawdopodobniej ma to, czego szukasz. (np. łatwe wyrównanie jednego dziecka do środka-x i środka-y, a drugiego do prawego-x środka-y - Flexbox ma margin-left: autodla łatwego lewego + prawego, ale nie środkowego + prawego) Przykład: stackoverflow.com/a/57128453 / 2441655
Venryx
1

W sytuacjach, gdy flex-endznana jest szerokość elementów, które chcesz , możesz ustawić ich flex na „0 0 ## px” i ustawić żądany element za flex-startpomocąflex:1

Spowoduje to, że pseudo flex-startelement wypełni pojemnik, po prostu sformatuj go text-align:leftlub cokolwiek innego.

Mahks
źródło
0

Rozwiązałem podobny przypadek, ustawiając styl wewnętrznego przedmiotu na margin: 0 auto.
Sytuacja: Moje menu zwykle zawiera trzy przyciski, w takim przypadku muszą być justify-content: space-between. Ale gdy jest tylko jeden przycisk, będzie on teraz wyśrodkowany w środku zamiast w lewo.

Micros
źródło