Preciso implementar um layout de alvenaria bastante comum. No entanto, por várias razões, não quero usar JavaScript para fazer isso. Parâmetros: Todos os elementos têm a mesma largura Os elementos têm uma altura que não pode ser calculada no lado do servidor (uma imagem mais várias quantidades...
Como todos sabemos, a flexpropriedade é um atalho para o flex-grow, flex-shrinke as flex-basispropriedades. Seu valor padrão é 0 1 auto, o que significa flex-grow: 0; flex-shrink: 1; flex-basis: auto; mas eu notei que em muitos lugares flex: 1é usado. É uma abreviação de 1 1 autoou 1 0 auto? Não...
O código a seguir pode ser encontrado neste exemplo ao vivo Eu tenho o seguinte elemento nativo reac: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View...
Com CSS típico, eu poderia flutuar uma das duas colunas para a esquerda e outra para a direita com algum espaço de sarjeta no meio. Como eu faria isso com o flexbox? http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display:...
Eu encontrei este tópico - Como você estica uma imagem para preencher um <div> enquanto mantém a proporção da imagem? - isso não é exatamente o que eu quero. Eu tenho um div com um determinado tamanho e uma imagem dentro dele. Eu quero sempre preencher o div com a imagem, independentemente...
Estou planejando deixar de usar layouts "flutuantes" e usar CSS flexbox para projetos futuros. Fiquei encantado em ver que todos os principais navegadores em suas versões atuais parecem oferecer suporte (de uma forma ou de outra) ao flexbox. Eu fui para "Resolvido pelo Flexbox" para ver alguns...
Eu tenho uma página da web simples com algum conteúdo Lipsum centralizado na página. A página funciona bem no Chrome e Firefox. Se eu reduzir o tamanho da janela, o conteúdo preenche a janela até que não possa mais e, em seguida, adiciona uma barra de rolagem e preenche o conteúdo fora da tela, na...
Usando o modelo CSS flex box, como posso forçar uma imagem a manter sua proporção? JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/ Observe que as imagens aumentam ou diminuem para preencher a largura do contêiner. Tudo bem, mas também podemos esticar ou diminuir a altura para manter as proporções da...
Esta questão se refere a um navegador com suporte total a CSS3, incluindo flexbox. Eu tenho um contêiner flexível com alguns itens nele. Eles são todos justificados para flex-start, mas quero que o último .end item seja justificado para flex-end. Existe uma boa maneira de fazer isso sem...
Como posso saber se uma linha de layout flexbox consome o espaço vertical restante em uma janela do navegador? Eu tenho um layout de flexbox de 3 linhas. As duas primeiras linhas têm altura fixa, mas a terceira é dinâmica e gostaria que aumentasse até a altura total do navegador. Eu tenho outro...
Eu quero usar um aplicativo de altura total usando o flexbox. Eu encontrei o que eu queria usando o antigo módulo de layout flexbox ( display: box;e outras coisas) neste link: CSS3 Flexbox full-height app and overflow Esta é uma solução correta para navegadores que suportam apenas a versão antiga...
Amostra: div { display: flex; height: 200px; background: tan; } span { background: red; } <div> <span>This is some text.</span> </div> Executar snippet de códigoOcultar resultadosExpandir snippet Eu tenho duas perguntas, por favor: Por que isso basicamente...
Percebi que isso é impossível de se conseguir usando o Flexbox, já que cada linha pode ter apenas a altura mínima necessária para ajustar seus elementos, mas isso pode ser alcançado usando o CSS Grid mais recente? Para ser claro, eu quero altura igual para todos os elementos em uma grade em todas...
Preciso de ajuda para resolver o problema, preciso centralizar o conteúdo dentro da coluna no bootstrap4, encontre meu código abaixo <div class="container"> <div class="row justify-content-center"> <div class="col-3"> <div class="nauk-info-connections"> </div>...
Usei o layout CSS flex box que aparece conforme mostrado abaixo: Se a tela ficar menor, ela se tornará assim: O problema é que as imagens não são redimensionadas mantendo a proporção da imagem original. É possível usar CSS puro e layout de flex box para permitir que as imagens sejam...
Como você pode ver, list-itemso primeiro rowtem o mesmo height. Mas os itens do segundo rowsão diferentes heights. Quero que todos os itens tenham um uniforme height. Existe alguma maneira de conseguir isso sem dar altura fixa e usando apenas o flexbox ? Aqui está o meu code .list {...
Quero fazer um divpalito na parte superior da tela sem qualquer influência sobre outros elementos e seu elemento filho no centro. .parent { display: flex; justify-content: center; position: absolute; } <div class="parent"> <div class="child">text</div> </div>...
Eu quero que os itens flexíveis sejam centralizados, mas quando tivermos uma segunda linha, tenha 5 (da imagem abaixo) abaixo de 1 e não centralizado no pai. Aqui está um exemplo do que eu tenho: ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;...
Estou tentando centralizar os elementos internos de uma <button>-tag com o do flexbox justify-content: center. Mas o Safari não os centraliza. Posso aplicar o mesmo estilo a qualquer outra tag e funciona como planejado (consulte a <p>-tag). Apenas o botão é alinhado à...
Eu tenho um contêiner flexível com dois itens flexíveis. Eu quero definir um margin-top no segundo, mas apenas quando estiver embrulhado e não na primeira linha flexível. Se possível, quero evitar o uso de consultas de mídia. Achei que a margem inferior do primeiro elemento poderia ser uma...