html - ¿Cómo puedo tener dos columnas de ancho fijo con una columna flexible en el centro?


1 Answers

A pesar de configurar las dimensiones de las columnas, todavía parecen reducirse a medida que la ventana se reduce.

Un ajuste inicial de un contenedor flex-shrink: 1 es flex-shrink: 1 . Es por eso que sus columnas se están reduciendo.

No importa el ancho que especifique ( puede ser width: 10000px ), con flex-shrink se puede ignorar el ancho especificado y se evita que los elementos flexibles se desborden del contenedor.

Estoy intentando configurar un flexbox con 3 columnas donde las columnas izquierda y derecha tienen un ancho fijo ...

Tendrá que desactivar el encogimiento. Aquí hay algunas opciones:

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

O

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

O, según lo recomendado por la especificación:

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

7.2. Componentes de la flexibilidad

Se recomienda a los autores que controlen la flexibilidad utilizando la abreviatura de flex lugar de hacerlo directamente con sus propiedades a largo plazo, ya que la abreviatura restablece correctamente los componentes no especificados para adaptarse a los usos comunes .

Más detalles aquí: ¿Cuáles son las diferencias entre la base flexible y el ancho?

Otra cosa que debo hacer es ocultar la columna de la derecha en función de la interacción del usuario, en cuyo caso la columna de la izquierda mantendría su ancho fijo, pero la columna central llenaría el resto del espacio.

Prueba esto:

.center { flex: 1; }

Esto permitirá que la columna central consuma el espacio disponible, incluido el espacio de sus hermanos cuando se eliminan.

Violín revisado

html css css3 flexbox

Estoy tratando de configurar un diseño de flexbox con tres columnas donde las columnas izquierda y derecha tienen un ancho fijo y la columna central se flexiona para llenar el espacio disponible.

A pesar de configurar las dimensiones de las columnas, todavía parecen reducirse a medida que la ventana se reduce.

Alguien sabe como lograr esto?

Una cosa adicional que tendré que hacer es ocultar la columna de la derecha en función de la interacción del usuario, en cuyo caso la columna de la izquierda mantendría su ancho fijo, pero la columna central llenaría el resto del espacio.

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

Aquí hay un JSFiddle: http://jsfiddle.net/zDd2g/185/



Related