Jak wyrównać kolumny Flexbox z lewej i prawej strony?

122

Z typowym CSS mógłbym przesunąć jedną z dwóch kolumn w lewo, a drugą w prawo, z pewną przestrzenią pomiędzy nimi. Jak mam to zrobić z flexboxem?

http://jsfiddle.net/1sp9jd32/

#container {
  width: 500px;
  border: solid 1px #000;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#a {
  width: 20%;
  border: solid 1px #000;
}
#b {
  width: 20%;
  border: solid 1px #000;
  height: 200px;
}

<div id="container">
  <div id="a">
    a
  </div>
  <div id="b">
    b
  </div>
</div>

Rozwiń fragment

html css flexbox

— archytect
źródło

278

Możesz dodać justify-content: space-betweendo elementu nadrzędnego. Robiąc to, elementy podrzędnego flexboksa zostaną wyrównane do przeciwnych stron z odstępem między nimi.

Zaktualizowany przykład

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

Pokaż fragment kodu

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

#a {
    width: 20%;
    border: solid 1px #000;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
}

<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

Rozwiń fragment

Możesz również dodać margin-left: autodo drugiego elementu, aby wyrównać go do prawej.

Zaktualizowany przykład

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}

Pokaż fragment kodu

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
}

#a {
    width: 20%;
    border: solid 1px #000;
    margin-right: auto;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}

<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

Rozwiń fragment

— Josh Crozier
źródło

4

Hej, czy mógłbyś wyjaśnić, jak element jest poprawnie wyrównany do prawej, używając margin-left: autotutaj?

— hulkinBrain

2

@hulkinBrain, oto wyjaśnienie: stackoverflow.com/a/33856609/3597276

— Michael Benjamin

2

UWAGA: margin-left: autoa margin-right: autosztuczka nie jest kompatybilna z IE11, dla tych, którzy nadal muszą ją obsługiwać.

— TetraDev

30

Wymyśliłem 4 metody, aby osiągnąć rezultaty. Oto demo

Metoda 1:

#a {
    margin-right: auto;
}

Metoda 2:

#a {
    flex-grow: 1;
}

Metoda 3:

#b {
    margin-left: auto;
}

Metoda 4:

#container {
    justify-content: space-between;
}

— geniuscarrier
źródło

9

Metoda 5: Wstaw dodatkowy pusty element z miejscem, w flex:1;którym chcesz, aby była dodatkowa przestrzeń :)

— adamdport

To byłaby najlepsza, najbardziej kompletna odpowiedź, gdybyś osadził fragment kodu zamiast linku do jsfiddle.

— styfle

Metody 1 i 3 nie są zgodne z IE 11!

— Peter Højlund Andersen

1

Inną opcją jest dodanie kolejnego tagu ze flex: autostylem pomiędzy tagami, który chcesz wypełnić pozostałą przestrzeń.

https://jsfiddle.net/tsey5qu4/

HTML:

<div class="parent">
  <div class="left">Left</div>
  <div class="fill-remaining-space"></div>
  <div class="right">Right</div>
</div>

CSS:

.fill-remaining-space {
  flex: auto;
}

Odpowiada to flex: 1 1 auto, które pochłania dodatkową przestrzeń wzdłuż głównej osi.

— konyak
źródło

0

Są różne sposoby, ale najprościej byłoby użyć spacji - patrz przykład na końcu

#container {    
    border: solid 1px #000;
    display: flex;    
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    height: 50px;
}

.item {
    width: 20%;
    border: solid 1px #000;
    text-align: center;
}

zobacz przykład

— Ali Adravi
źródło