Wie kann ich zwei Spalten mit fester Breite und eine flexible Spalte in der Mitte haben?

Question

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

Obwohl die Dimensionen für die Spalten konfiguriert wurden, scheinen sie immer kleiner zu werden, wenn das Fenster verkleinert wird.

Wer weiß, wie man das erreicht?

Eine zusätzliche Sache, die ich tun muss, ist das Ausblenden der rechten Spalte basierend auf Benutzerinteraktion. In diesem Fall würde die linke Spalte immer noch ihre feste Breite behalten, aber die mittlere Spalte würde den Rest des Platzes fü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 ein JSFiddle: http://jsfiddle.net/zDd2g/185/

Answer 1

Statt width verwenden (das ist ein Vorschlag ist, wenn Flexbox verwendet wird), könnten Sie flex: 0 0 230px; verwenden, das bedeutet:

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

das heißt: immer 230px sein.

See fiddle, @TylerH dank

Oh, und Sie die justify-content und align-items hier nicht brauchen.

Answer 2

Obwohl die Dimensionen für die Spalten eingerichtet wurden, scheinen sie immer kleiner zu werden, wenn das Fenster verkleinert wird.

Eine anfängliche Einstellung eines Flex-Containers ist flex-shrink: 1. Deshalb schrumpfen Ihre Spalten.

Es spielt keine Rolle, welche Breite Sie angeben (it could be width: 10000px), mit flex-shrink kann die angegebene Breite ignoriert werden und es wird verhindert, dass Flex-Elemente den Container überlaufen.

Ich versuche, eine Flexbox mit 3 Spalten einzurichten, wo die linken und rechten Spalte eine feste Breite haben ...

Sie müssen schrumpfen deaktivieren.Hier sind einige Möglichkeiten:

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

ODER

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

OR, wie sie in der Spezifikation empfohlen:

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

7.2. Components of Flexibility

Autoren dazu ermutigt werden, die Flexibilität zu steuern die Verwendung von flex shor thando anstatt mit seinen Eigenschaften longhand direkt, wie die Kurzschrift korrekt alle nicht spezifizierten Komponenten zurückgesetzt, um common uses unterzubringen.

Weitere Details hier: What are the differences between flex-basis and width?

Eine weitere Sache, die ich tun muß, ist die rechte Spalte Interaktion basierend auf Benutzer zu verbergen, wobei in diesem Fall die linke Spalte noch seine feste Breite halten würde, aber das Zentrum Spalte würde den Rest des Raumes füllen.

Try this:

.center { flex: 1; } 

Dies wird die Mittelsäule ermöglicht verfügbaren Speicherplatz zu verbrauchen, einschließlich dem Raum seines Geschwister, wenn sie entfernt werden.

Revised Fiddle