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


316

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

Alguien sabe cómo lograr esto?

Una cosa adicional que tendré que hacer es ocultar la columna derecha en función de la interacción del usuario, en cuyo caso la columna izquierda aún 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/


Respuestas:


632

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

  • 0= no crezca (abreviatura de flex-grow)
  • 0= no encoger (abreviatura de flex-shrink)
  • 230px= comenzar en 230px(abreviatura de flex-basis)

lo que significa: siempre se 230px.

Ver violín , gracias @TylerH

Ah, y no necesitas el justify-contenty align-itemsaquí.

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;
}

14
En la implementación actual (al menos en Chrome), también debe asegurarse de que la columna central se haya flex-growdefinido (como se dice 1). Violín actualizado .
base

2
¿Por qué el ancho no funciona? y necesito el flex: 0 0 230px ;?
Rodrigo Ruiz

3
flex-grow: 1todavía es necesario para la columna de fluido en Chrome 53. De lo contrario, no tomaría el resto del ancho. Supongo que la respuesta debería considerar este hecho.
thybzi

8
Para cualquiera todavía confundido, flex: 0 0 200pxactúa igual que width: 200px; flex-shrink: 0.
bryc

3
He copiado el Fiddle aquí en caso de que Rudie lo haya perdido: jsfiddle.net/133rr51u
TylerH

53

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

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

No importa qué ancho especifique ( podría serwidth: 10000px ), con flex-shrinkel ancho especificado se puede ignorar y se evita que los elementos flexibles desborden el contenedor.

Estoy tratando de configurar una caja flexible 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 flexibilidad

Se alienta a los autores a controlar la flexibilidad usando la flextaquigrafía en lugar de sus propiedades de la mano directamente, ya que la taquigrafía restablece correctamente cualquier componente no especificado para acomodar usos comunes .

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

Una cosa adicional que debo hacer es ocultar la columna derecha según la interacción del usuario, en cuyo caso la columna izquierda aún 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.

Violín revisado


Agregar flex: 1;al centro divfue suficiente, gracias.
MUERE el

5

La compatibilidad con los navegadores más antiguos puede ser una carga, así que ten cuidado.

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

Cambie los valores izquierdo y derecho 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>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.