Wie werden Flexbox-Spalten links und rechts ausgerichtet?

121

Mit typischem CSS konnte ich eine von zwei Spalten links und eine andere rechts mit etwas Rinnenraum dazwischen schweben lassen. Wie würde ich das mit Flexbox machen?

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>

Erweitern Sie das Snippet

html css flexbox

— Archytekt
quelle

278

Sie können justify-content: space-betweendem übergeordneten Element hinzufügen . Dabei werden die untergeordneten Flexbox-Elemente mit Abstand zwischen ihnen auf gegenüberliegenden Seiten ausgerichtet.

Beispiel aktualisiert

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

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Sie können auch margin-left: autodas zweite Element hinzufügen , um es rechts auszurichten.

Beispiel aktualisiert

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

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

— Josh Crozier
quelle

4

Hey, kannst du bitte erklären, wie das Element hier richtig ausgerichtet wird margin-left: auto?

— HulkinBrain

2

@hulkinBrain, hier ist die Erklärung: stackoverflow.com/a/33856609/3597276

— Michael Benjamin

2

HINWEIS: margin-left: autound margin-right: autoTrick ist nicht IE11-kompatibel, für diejenigen, die es noch unterstützen müssen.

— TetraDev

30

Ich habe 4 Methoden entwickelt, um die Ergebnisse zu erzielen. Hier ist eine Demo

Methode 1:

#a {
    margin-right: auto;
}

Methode 2:

#a {
    flex-grow: 1;
}

Methode 3:

#b {
    margin-left: auto;
}

Methode 4:

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

— Genie-Träger
quelle

9

Methode 5: Fügen Sie ein zusätzliches leeres Element ein, mit flex:1;wo immer Sie den zusätzlichen Platz haben möchten :)

— Adamdport

Dies wäre die beste und vollständigste Antwort, wenn Sie das Code-Snippet eingebettet hätten, anstatt eine Verknüpfung zu jsfiddle herzustellen.

— Styfle

Methode 1 und 3 ist nicht kompatibel mit IE 11!

— Peter Højlund Andersen

1

Eine andere Möglichkeit besteht darin, flex: autozwischen Ihren Tags ein weiteres Tag mit Stil hinzuzufügen , das Sie in den verbleibenden Bereich einfügen möchten.

https://jsfiddle.net/tsey5qu4/

Der HTML:

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

Das CSS:

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

Dies entspricht flex: 1 1 auto, das zusätzlichen Platz entlang der Hauptachse absorbiert.

— konyak
quelle

0

Es gibt verschiedene Möglichkeiten, aber am einfachsten wäre es, den Zwischenraum zu verwenden (siehe Beispiel am Ende)

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

siehe das Beispiel

— Ali Adravi
quelle