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


Answers

A pesar de establecer las dimensiones de las columnas, todavía parecen encogerse a medida que la ventana se encoge.

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

No importa qué ancho especifique ( puede ser width: 10000px ), con flex-shrink el ancho especificado puede ignorarse y los elementos flexibles no pueden desbordar el contenedor.

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

Deberá deshabilitar la reducción. 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 alienta a los autores a controlar la flexibilidad utilizando la abreviatura de flex lugar de sus propiedades manuales directamente, ya que la abreviatura restablece correctamente los componentes no especificados para acomodar los usos comunes .

Más detalles aquí: ¿Cuáles son las diferencias entre flex-basis y ancho?

Otra cosa que debo hacer es ocultar la columna correcta en función de la interacción del usuario, en cuyo caso la columna izquierda mantendría su ancho fijo, pero la columna central ocuparí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.

Fiddle revisado

Question

Estoy intentando configurar un diseño de cuadro flexible 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 establecer las dimensiones de las columnas, todavía parecen encogerse a medida que la ventana se encoge.

Alguien sabe cómo lograr esto?

Otra cosa que tendré que hacer es esconder la columna derecha en función de la interacción del usuario, en cuyo caso la columna izquierda mantendría su ancho fijo, pero la columna central ocuparí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