Como definir uma coluna de largura fixa com CSS flexbox

149

CodePen: http://codepen.io/anon/pen/RPNpaP .

Quero que a caixa vermelha tenha apenas 25 cm de largura quando estiver na vista lado a lado - estou tentando conseguir isso definindo o CSS dentro desta consulta de mídia:

@media all and (min-width: 811px) {...}

para:

.flexbox .red {
  width: 25em;
}

Mas quando faço isso, isso acontece:

http://i.imgur.com/niFBrwt.png

Alguma idéia do que estou fazendo de errado?

Ciência
fonte

Respostas:

331

Você deve usar a propriedade flexou flex-basisem vez de width. Leia mais sobre MDN .

.flexbox .red {
  flex: 0 0 25em;
}

A flexpropriedade CSS é uma propriedade abreviada que especifica a capacidade de um item flex alterar suas dimensões para preencher o espaço disponível. Contém:

flex-grow: 0;     /* do not grow   - initial value: 0 */
flex-shrink: 0;   /* do not shrink - initial value: 1 */
flex-basis: 25em; /* width/height  - initial value: auto */

Uma demonstração simples mostra como definir a primeira coluna para 50pxlargura fixa.


Veja o codepen atualizado com base no seu código.

Adesivos
fonte
21
Não sabia que tinha que substituir flex-shrink, obrigado, boa resposta.
Paul Redmond
Não foi possível obter flex-base: auto ao trabalho até que eu percebi grade da minha biblioteca de componentes (Semantic UI Reagir) tinha uma configuração padrão da coluna regra css desonestos largura 😅 medium.freecodecamp.org/...
Roman Scher
1

Caso alguém queira ter um flexbox responsivo com porcentagens (%), é muito mais fácil para consultas de mídia.

flex-basis: 25%;

Isso será muito mais suave ao testar.

// VARIABLES
$screen-xs:                                         480px;
$screen-sm:                                         768px;
$screen-md:                                         992px;
$screen-lg:                                         1200px;
$screen-xl:                                         1400px;
$screen-xxl:                                        1600px;

// QUERIES
@media screen (max-width: $screen-lg) {
    flex-basis: 25%;
}

@media screen (max-width: $screen-md) {
    flex-basis: 33.33%;
}
chris_r
fonte