Articles of flexbox

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 […]

Preencha o espaço vertical restante com CSS usando display: flex

Em um layout de 3 linhas: a linha superior deve ser dimensionada de acordo com o seu conteúdo a linha inferior deve ter uma altura fixa em pixels a linha do meio deve se expandir para encher o contêiner O problema é que, à medida que o conteúdo principal se expande, ele suga as linhas […]

Como posso obter o comportamento do FF 33.x Flexbox em FF 34.x?

Usamos o flexbox muito para um aplicativo de área de trabalho como o aplicativo da Web e ele está funcionando muito bem. Mas com o mais recente Firefox Developer Edition (35.0a2) o layout não se comporta como esperado (cresce além da viewport): http://tinyurl.com/k6a8jde Isso funciona bem no Firefox 33.1. Eu diria que isso tem algo […]

O texto em um contêiner flexível não é agrupado no IE11

Considere o seguinte trecho: .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry No Chrome, o texto é […]

Flex-box: Alinhar a última linha à grade

Eu tenho um layout simples de checkbox flexível com um contêiner como: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } Agora quero que os itens da última linha estejam alinhados com o outro. justify-content: space-between; deve ser usado porque a largura e a altura da grade podem ser ajustadas. Atualmente parece Aqui, quero […]