Come posso avere due colonne a larghezza fissa con una colonna flessibile al centro?

Sto cercando di impostare un layout flexbox con tre colonne in cui le colonne sinistra e destra hanno una larghezza fissa e la colonna centrale si flette per riempire lo spazio disponibile.

Nonostante l'impostazione delle dimensioni per le colonne, sembrano comunque ridursi man mano che la finestra si restringe.

Qualcuno sa come realizzare questo?

Un'ulteriore cosa che dovrò fare è nascondere la colonna di destra in base all'interazione dell'utente, nel qual caso la colonna di sinistra manterrebbe comunque la sua larghezza fissa, ma la colonna centrale riempirebbe il resto dello spazio.

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

Ecco un JSFiddle: http://jsfiddle.net/zDd2g/185/

Invece di utilizzare width(che è un suggerimento quando si utilizza flexbox), è possibile utilizzare il flex: 0 0 230px;che significa:

• 0= non crescere (abbreviazione di flex-grow)
• 0= non ridurre (abbreviazione di flex-shrink)
• 230px= inizio alle 230px(scorciatoia per flex-basis)

il che significa: essere sempre 230px.

Vedi violino , grazie @TylerH

Oh, e non hai bisogno di justify-contente align-itemsqui.

img {
    max-width: 100%;
}
#container {
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    max-width: 1200px;
}
.column.left {
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
}
.column.center {
    border-left: 1px solid #eee;
}

Nonostante l'impostazione delle dimensioni per le colonne, sembrano comunque ridursi man mano che la finestra si restringe.

Un'impostazione iniziale di un contenitore flessibile è flex-shrink: 1. Ecco perché le tue colonne si stanno riducendo.

Non importa quale larghezza specifichi ( potrebbe esserewidth: 10000px ), con flex-shrinkla larghezza specificata può essere ignorata e gli elementi flessibili possono evitare di traboccare il contenitore.

Sto cercando di impostare un flexbox con 3 colonne in cui le colonne sinistra e destra hanno una larghezza fissa ...

Dovrai disabilitare la riduzione. Ecco alcune opzioni:

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

O

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

OPPURE, come raccomandato dalle specifiche:

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

7.2. Componenti di flessibilità

Gli autori sono incoraggiati a controllare la flessibilità utilizzando la flexstenografia anziché direttamente con le proprietà della stenografia, poiché la stenografia reimposta correttamente tutti i componenti non specificati per adattarsi agli usi comuni .

Maggiori dettagli qui: quali sono le differenze tra flex-base e larghezza?

Un'altra cosa che devo fare è nascondere la colonna di destra in base all'interazione dell'utente, nel qual caso la colonna di sinistra manterrebbe comunque la sua larghezza fissa, ma la colonna centrale riempirebbe il resto dello spazio.

Prova questo:

.center { flex: 1; }

Ciò consentirà alla colonna centrale di consumare spazio disponibile, incluso lo spazio dei suoi fratelli quando vengono rimossi.

Fiddle rivisto

La compatibilità con i browser meno recenti può essere un problema, quindi è consigliabile.

Se questo non è un problema, vai avanti. Esegui lo snippet. Vai alla visualizzazione a pagina intera e ridimensiona. Center si ridimensionerà automaticamente senza modifiche ai div sinistro o destro.

Modifica i valori sinistro e destro per soddisfare le tue esigenze.

Grazie.

Spero che questo ti aiuti.

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