Articles of flexbox

Como alinhar a última linha / linha esquerda em várias linhas flexbox

Eu tenho um grande problema com o layout flexbox. Eu construo um container com uma checkbox cheia de imagens, e eu decidi usar o layout do flexbox para justificar o conteúdo para que pareça uma grade Ela é o código: … e o CSS: .container { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-around; -webkit-justify-content: […]

Definindo um comprimento (altura ou largura) para um elemento menos o comprimento variável de outro, ou seja, calc (x – y), onde y é desconhecido

Eu sei que podemos usar calc quando os comprimentos são definidos: flex-basis: calc(33.33% – 60px); left: calc(50% – 25px); height: calc(100em/5); Mas e se um comprimento é variável? height: calc(100% – <>); OU width: calc(100% – 50px – <>); Existe uma maneira padrão de fazer isso em CSS? Eu sei que a tarefa geral é […]

Preenchimento inferior / superior no layout flexbox

Eu tenho um layout flexbox contendo dois itens. Um deles usa fundo de preenchimento : #flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid green; padding: .5em; } #padding { margin: 1em 0; border: 1px solid blue; padding-bottom: 56.25%; /* intrinsic […]

Alinhando itens de grade em toda a linha / coluna (como itens flexíveis)

Com um contêiner flex e flex-wrap: wrap você pode alinhar os itens de transbordamento ao centro usando justify-content: center . Existe uma maneira de obter o mesmo comportamento para o excesso de itens da grade usando a grade CSS? Eu criei uma caneta mostrando o comportamento flexível desejado .container-flex { display: flex; flex-wrap: wrap; justify-content: […]

Modelo de checkbox flexível – display: flex, box, flexbox?

Muitos de nós estão cientes hoje de que os valores mais antigos da propriedade de display , como inline e block estão desatualizados depois que o novo modelo de checkbox flexível foi introduzido no CSS3. Mas, podemos encontrar informações diferentes na web no mesmo modelo de checkbox flexível. Podemos encontrar principalmente 3 valores diferentes da […]

Linhas de altura iguais no layout da grade CSS

Eu entendo que isso é impossível de conseguir usando o Flexbox, já que cada linha só pode ter a altura mínima necessária para ajustar seus elementos, mas isso pode ser conseguido usando o mais novo CSS Grid? Para ser claro, quero altura igual para todos os elementos em uma grade em todas as linhas, não […]

Defina as crianças do flexbox para ter alturas diferentes para usar o espaço disponível

Usando um layout de flexbox de duas colunas, como podem ser feitas crianças de tamanhos diferentes para preencher todo o espaço disponível, em vez de todas as crianças terem a altura do filho mais alto da linha? Eu configurei uma demonstração no jsbin que ilustra o problema. Eu gostaria que todas as crianças tivessem o […]

Flexbox CSS não funciona no IE10

No IE10, esse código não está funcionando corretamente: .flexbox form { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; } .flexbox form input[type=submit] { width: 31px; } .flexbox form input[type=text] { width: auto; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; […]

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