Wie kann ich zwei Spalten mit fester Breite mit einer flexiblen Spalte in der Mitte haben?

315

Ich versuche, ein Flexbox-Layout mit drei Spalten einzurichten, wobei die linke und rechte Spalte eine feste Breite haben und die mittlere Spalte gebogen wird, um den verfügbaren Platz auszufüllen.

Obwohl die Abmessungen für die Spalten festgelegt wurden, scheinen sie beim Verkleinern des Fensters immer noch zu schrumpfen.

Weiß jemand, wie man das erreicht?

Eine zusätzliche Sache, die ich tun muss, ist das Ausblenden der rechten Spalte basierend auf der Benutzerinteraktion. In diesem Fall würde die linke Spalte ihre feste Breite beibehalten, aber die mittlere Spalte würde den Rest des Raums ausfüllen.

#container {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    max-width: 1200px;
}

.column.left {
    width: 230px;
}

.column.right {
    width: 230px;
    border-left: 1px solid #eee;
}

.column.center {
    border-left: 1px solid #eee;
}
<div id="container">
    <div class="column left">
        <p>Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013. It featured essays, fiction, and art by a wide range of contributors that explored anxiety from scientific, literary, and artistic perspectives.</p>
    </div>
    <div class="column center">
        <img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">
    </div>
    <div class="column right">
        Balint Zsako
        <br/> Someone’s Knocking at My Door
        <br/> 01.12.13
    </div>
</div>

Hier ist eine JSFiddle: http://jsfiddle.net/zDd2g/185/

mheavers
quelle

Antworten:

630

Anstatt zu verwenden width(was ein Vorschlag bei der Verwendung von Flexbox ist), können Sie Folgendes verwenden flex: 0 0 230px;:

  • 0= nicht wachsen (Abkürzung für flex-grow)
  • 0= nicht schrumpfen (Abkürzung für flex-shrink)
  • 230px= beginne bei 230px(Abkürzung für flex-basis)

was bedeutet: immer sein 230px.

Siehe Geige , danke @TylerH

Oh, und du brauchst das justify-contentund align-itemshier nicht.

Rudie
quelle
14
In der aktuellen Implementierung (zumindest in Chrome) müssen Sie außerdem sicherstellen, dass die mittlere Spalte flex-growdefiniert ist (wie z. B. 1). Geige aktualisiert .
Baseten
2
Warum funktioniert nur die Breite nicht? und ich brauche den flex: 0 0 230px;?
Rodrigo Ruiz
3
flex-grow: 1wird in Chrome 53 noch für die Flüssigkeitssäule benötigt. Andernfalls würde der Rest der Breite nicht benötigt. Ich nehme an, die Antwort sollte diese Tatsache berücksichtigen.
Thybzi
8
Für jeden, der noch verwirrt ist, flex: 0 0 200pxverhält es sich genauso wie width: 200px; flex-shrink: 0.
Bryc
3
Ich habe die Geige hier kopiert, falls Rudie sie verloren hat: jsfiddle.net/133rr51u
TylerH
53

Obwohl die Abmessungen für die Spalten festgelegt wurden, scheinen sie beim Verkleinern des Fensters immer noch zu schrumpfen.

Eine Grundeinstellung eines Flexcontainers ist flex-shrink: 1. Deshalb schrumpfen Ihre Spalten.

Es spielt keine Rolle, welche Breite Sie angeben ( es könnte seinwidth: 10000px ), flex-shrinkdie angegebene Breite kann ignoriert werden und verhindert, dass Flex-Elemente den Container überlaufen.

Ich versuche eine Flexbox mit 3 Spalten einzurichten, wobei die linke und rechte Spalte eine feste Breite haben ...

Sie müssen das Schrumpfen deaktivieren. Hier sind einige Optionen:

.left, .right {
     width: 230px;
     flex-shrink: 0;
 }  

ODER

.left, .right {
     flex-basis: 230px;
     flex-shrink: 0;
}

ODER, wie von der Spezifikation empfohlen:

.left, .right {
    flex: 0 0 230px;    /* don't grow, don't shrink, stay fixed at 230px */
}

7.2. Komponenten der Flexibilität

Autoren werden aufgefordert, die Flexibilität mithilfe der flexKurzschrift und nicht direkt mit ihren Langhand-Eigenschaften zu steuern , da die Kurzschrift alle nicht spezifizierten Komponenten korrekt zurücksetzt, um den allgemeinen Verwendungszwecken gerecht zu werden .

Weitere Details hier: Was sind die Unterschiede zwischen Flex-Basis und Breite?

Eine weitere Sache, die ich tun muss, ist das Ausblenden der rechten Spalte basierend auf der Benutzerinteraktion. In diesem Fall würde die linke Spalte ihre feste Breite beibehalten, aber die mittlere Spalte würde den Rest des Raums ausfüllen.

Versuche dies:

.center { flex: 1; }

Dadurch kann die mittlere Spalte verfügbaren Speicherplatz belegen, einschließlich des Speicherplatzes ihrer Geschwister, wenn diese entfernt werden.

Überarbeitete Geige

Michael Benjamin
quelle
Das Hinzufügen flex: 1;zum Zentrum divwar genug, danke.
stirbt
4

Die Kompatibilität mit älteren Browsern kann ein Problem sein.

Wenn das kein Problem ist, fahren Sie fort. Führen Sie das Snippet aus. Gehen Sie zur vollständigen Seitenansicht und ändern Sie die Größe. Das Center ändert seine Größe ohne Änderungen an den linken oder rechten Divs.

Ändern Sie die linken und rechten Werte, um Ihre Anforderungen zu erfüllen.

Vielen Dank.

Hoffe das hilft.

#container {
  display: flex;
}

.column.left {
  width: 100px;
  flex: 0 0 100px;
}

.column.right {
  width: 100px;
  flex: 0 0 100px;
}

.column.center {
  flex: 1;
  text-align: center;
}

.column.left,
.column.right {
  background: orange;
  text-align: center;
}
<div id="container">
  <div class="column left">this is left</div>
  <div class="column center">this is center</div>
  <div class="column right">this is right</div>
</div>

2xSamurai
quelle