Como posso ter duas colunas de largura fixa com uma coluna flexível no centro?

316

Estou tentando configurar um layout de caixa flexível com três colunas em que as colunas esquerda e direita têm uma largura fixa e a coluna central flexiona para preencher o espaço disponível.

Apesar de configurar as dimensões das colunas, elas ainda parecem encolher à medida que a janela diminui.

Alguém sabe como fazer isso?

Outra coisa que precisarei fazer é ocultar a coluna da direita com base na interação do usuário. Nesse caso, a coluna da esquerda ainda manteria sua largura fixa, mas a coluna central preencheria o restante do espaço.

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

Aqui está um JSFiddle: http://jsfiddle.net/zDd2g/185/

mheavers
fonte

Respostas:

632

Em vez de usar width(o que é uma sugestão ao usar o flexbox), você pode usar o flex: 0 0 230px;que significa:

  • 0= não cresça (abreviação de flex-grow)
  • 0= não encolher (abreviação de flex-shrink)
  • 230px= iniciar às 230px(abreviação de flex-basis)

o que significa: sempre seja 230px.

Veja violino , obrigado @TylerH

Ah, e você não precisa do justify-contente align-itemsaqui.

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;
}
Rudie
fonte
14
Na implementação atual (pelo menos no Chrome), você também precisa garantir que a coluna do meio tenha sido flex-growdefinida (como digamos 1). Violino atualizado .
base
2
por que apenas a largura não funciona? e eu preciso do flex: 0 0 230px ;?
Rodrigo Ruiz
3
flex-grow: 1ainda é necessário para a coluna de fluido no Chrome 53. Caso contrário, não levaria o resto da largura. Suponho que a resposta deva considerar esse fato.
thybzi
8
Para quem ainda está confuso, flex: 0 0 200pxage da mesma forma que width: 200px; flex-shrink: 0.
bryc
3
Eu copiei o Fiddle aqui, caso Rudie o perdesse: jsfiddle.net/133rr51u
TylerH 5/18
53

Apesar de configurar as dimensões das colunas, elas ainda parecem encolher à medida que a janela diminui.

Uma configuração inicial de um contêiner flexível é flex-shrink: 1. É por isso que suas colunas estão encolhendo.

Não importa qual largura você especificar ( poderia serwidth: 10000px ), com flex-shrinka largura especificada pode ser ignorada e os itens flexíveis são impedidos de transbordar o contêiner.

Estou tentando configurar um flexbox com 3 colunas onde as colunas esquerda e direita têm uma largura fixa ...

Você precisará desativar o encolhimento. Aqui estão algumas opções:

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

OU

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

OU, conforme recomendado pela especificação:

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

7.2 Componentes de flexibilidade

Os autores são incentivados a controlar a flexibilidade usando a flexabreviação, em vez de diretamente com suas propriedades, pois a redefinição redefine corretamente qualquer componente não especificado para acomodar usos comuns .

Mais detalhes aqui: Quais são as diferenças entre base flexível e largura?

Outra coisa que preciso fazer é ocultar a coluna da direita com base na interação do usuário. Nesse caso, a coluna da esquerda ainda manteria sua largura fixa, mas a coluna central preencheria o restante do espaço.

Tente o seguinte:

.center { flex: 1; }

Isso permitirá que a coluna central consuma o espaço disponível, incluindo o espaço de seus irmãos quando eles forem removidos.

Fiddle revisado

Michael Benjamin
fonte
Adicionar flex: 1;ao centro divfoi suficiente, obrigado.
DIES 15/10
5

A compatibilidade com navegadores mais antigos pode ser uma chatice, por isso é aconselhável.

Se isso não for um problema, vá em frente. Execute o trecho. Vá para a visualização de página inteira e redimensione. O Center será redimensionado sem alterações nas divs esquerda ou direita.

Altere os valores esquerdo e direito para atender às suas necessidades.

Obrigado.

Espero que isto ajude.

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

2xSamurai
fonte