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

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/

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.

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

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>