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

ordenar columnas bootstrap 4

Question

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/

Answer 1

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

Answer 2

En lugar de usar el width (que es una sugerencia cuando se usa flexbox), puedes usar flex: 0 0 230px; lo que significa:

• 0 = no crecer (taquigrafía para flex-grow )
• 0 = no encoger (taquigrafía para flex-shrink )
• 230px = inicio en 230px (taquigrafía para flex-basis )

lo que significa: siempre ser 230px .

Ver violín , gracias @TylerH

Ah, y no necesitas el justify-content y align-items aquí.

Answer 3

La compatibilidad con navegadores más antiguos puede ser una carga, por lo que se recomienda.

Si eso no es un problema, entonces adelante. Ejecutar el fragmento. Ir a la vista de página completa y cambiar el tamaño. El centro se redimensionará a sí mismo sin cambios en los divs izquierdo o derecho.

Cambie los valores de izquierda y derecha para cumplir con sus requisitos.

Gracias.

Espero que esto ayude.

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