Articles of flexbox

Bootstrap 4 navbar com 2 linhas

Eu criei uma barra de navegação com o Bootstrap 4 alpha 6 que tem uma grande marca / ícone à esquerda e 2 nav nav-nav com links à direita do ícone. Uma nav tem links e a outra nav tem icons. Está funcionando exatamente como eu quero, exceto por uma coisa. Eu gostaria que as […]

Crie uma grade de alvenaria com o flexbox (ou outro CSS)

Eu gostaria de obter um efeito de grade no CSS com elementos que tenham a mesma largura em tamanho, mas não em altura. Eu gostaria que o elemento abaixo estivesse sempre a 50px do fundo, o que quer que seja o próximo. Eu tentei com carros alegóricos, mas esse bug. Então eu tentei com Flex, […]

Como mudar o envoltório do flexbox?

Eu tenho uma checkbox de flexbox responsivo com cartões renderizados dinamicamente (de 1 a 10 cartões processados ​​em cada chamada de API) em meu aplicativo. Quase faz exatamente o que eu quero fazer, exceto a forma como ele envolve. Digamos que eu renderizei 10 cartas, se eu resize a canvas para que ela se transforme […]

Div rolável para ficar no fundo, quando div externo muda de tamanho

Aqui está um exemplo de aplicativo de bate-papo -> A ideia aqui é que o .messages-container ocupe o máximo possível da canvas. Dentro de .messages-container , .scroll mantém a lista de mensagens e, caso haja mais mensagens, o tamanho da canvas será exibido. Agora, considere este caso: O usuário rola para o final da conversa […]

Diferença entre display: inline-flex e display: flex

Eu tenho dificuldade em entender a display:inline-flex; da propriedade display:inline-flex; . Qual é a diferença entre display:inline-flex; e display:flex; ? Eu estou tentando alinhar verticalmente alguns elementos dentro do wrapper ID. É por isso que eu dei a display:inline-flex; da propriedade display:inline-flex; para este ID; porque o wrapper de ID é o contêiner flexível. Mas […]

Como o fator flex-shrink em padding e border-box?

Digamos que temos um contêiner flex com largura de 400px. Dentro deste contêiner estão três itens flexíveis: :nth-child(1) { flex: 0 2 300px; } /* flex-grow, flex-shrink, flex-basis */ :nth-child(2) { flex: 0 1 200px; } :nth-child(3) { flex: 0 2 100px; } Portanto, a largura total dos itens flexíveis é de 600px e o […]

Em vez de usar prefixos, quero pedir aos visitantes do site que atualizem seu navegador

Estou reconstruindo um site usando o flexbox CSS. Ao verificar a compatibilidade do navegador , vejo que o flexbox é suportado por todos os navegadores modernos, exceto que o Safari 8 e o IE 10 exigem prefixos de fornecedores. Ao verificar o Google Analytics, vejo que 96% dos visitantes do site nos últimos 6 meses […]

Como fazer com que as crianças do flexbox tenham 100% de altura de seus pais?

Estou tentando preencher o espaço vertical de um item flexível dentro de um flexbox. .container { height: 200px; width: 500px; display: -moz-box; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; -moz-box-flex: 1; -webkit-flex: […]

Como obter o header de cartões ou similar para ter a mesma altura com flex box?

Sem hacks por favor sem codificação. A ideia não é resolvê-lo para um caso, por exemplo, para o caso de haver 4 colunas, mas para conteúdo dynamic e para tamanhos de canvas responsivos. O problema para mim é que basicamente não são crianças diretas, mas o conteúdo dela codepen aqui: HTML disclaimer: resize the window. […]

Faça flex-grow expandir itens com base em seu tamanho original

Eu tenho 3 botões em uma linha que variam em largura. Eu quero que todos eles ganham largura igual para preencher a largura restante da linha, então o mais largo ainda será mais largo que os outros, etc. Você pode ver abaixo que o que eu tentei fazer com flex resultou em todos os botões […]