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

Question

Sto provando a impostare un layout di una casella flessibile 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 le dimensioni di impostazione per le colonne, sembrano ancora ridursi quando la finestra si restringe.

Qualcuno sa come realizzare questo?

Un'ulteriore cosa che dovrò fare è nascondere la colonna 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/

Answer 1

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

• 0 = non crescere (abbreviazione di flex-grow)
• 0 = non si restringono (abbreviazione per flex-shrink)
• 230px = iniziare a 230px (abbreviazione per flex-basis)

che significa: essere sempre 230px.

See fiddle, grazie @TylerH

Oh, e non è necessario il justify-content e align-items qui.

Answer 2

Nonostante le dimensioni di impostazione per le colonne, sembrano ancora ridursi quando la finestra si restringe.

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

Non importa la larghezza specificata (it could be width: 10000px), con flex-shrink, la larghezza specificata può essere ignorata e gli elementi flessibili non possono essere sovraccaricati dal contenitore.

Sto cercando di creare un FlexBox con 3 colonne in cui nella colonna di sinistra e di destra hanno una larghezza fissa ...

Sarà necessario disattivare contrazione.Ecco alcune opzioni:

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

O

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

O, come raccomandato dalle specifiche:

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

7.2. Components of Flexibility

autori sono invitati a controllare la flessibilità utilizzando il flex shor thand piuttosto che con le sue proprietà longhand direttamente, come la stenografia ripristina correttamente qualsiasi componente non specificato per adattarsi allo common uses.

Maggiori dettagli qui: What are the differences between flex-basis and width?

Una cosa aggiuntiva che devo fare è nascondere la colonna di destra sulla base di interazione con l'utente, nel qual caso la colonna di sinistra sarebbe ancora mantenere la sua larghezza fissa, ma il centro colonna riempirebbe il resto dello spazio.

Prova questo:

.center { flex: 1; } 

Questo permetterà alla colonna centrale di consumare spazio a disposizione, incluso lo spazio dei suoi fratelli quando vengono rimossi.

Revised Fiddle