Perguntas com a marcação «flexbox»

Estou tentando configurar um layout de caixa flexível com três colunas em que as colunas esquerda e direita têm uma largura fixa e a coluna central flexiona para preencher o espaço disponível. Apesar de configurar as dimensões das colunas, elas ainda parecem encolher à medida que a janela diminui. Alguém …

316 html  css  flexbox 

Eu tenho 4 colunas flexbox e tudo funciona bem, mas quando adiciono algum texto a uma coluna e o configuro para um tamanho de fonte grande, ele está tornando a coluna mais larga do que deveria devido à propriedade flex. Tentei usar word-break: break-worde ajudou, mas ainda assim, quando redimensiono …

313 html  css  flexbox 

Você pode substituir align-itemscom align-selfpara um item de flex. Estou procurando uma maneira de substituir justify-contentum item flexível. Se você tinha um contêiner flexbox com justify-content:flex-end, mas deseja o primeiro item justify-content: flex-start, como isso pode ser feito? Esta resposta foi melhor respondida por este post: https://stackoverflow.com/a/33856609/269396

283 css  flexbox 

Estou usando uma caixa flexível para exibir 8 itens que serão redimensionados dinamicamente com minha página. Como forçá-lo a dividir os itens em duas linhas? (4 por linha)? Aqui está um trecho relevante: (Ou se você preferir jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/ ) .parent-wrapper { height: 100%; width: 100%; border: 1px solid …

260 html  css  flexbox 

Portanto, ao tentar criar um modal útil usando o flexbox, descobri o que parece ser um problema no navegador e fico imaginando se há uma correção ou solução conhecida - ou idéias sobre como resolvê-lo. A coisa que estou tentando resolver tem dois aspectos. Primeiro, mantendo a janela modal centralizada …

259 html  css  flexbox  browser-bugs 

Como obter informações adicionais sobre Stack Overflow no item : Item do Flexbox - Manual do Usuário Existe uma maneira de fazer uma quebra de linha no flexbox de várias linhas? Por exemplo, para quebrar após cada terceiro item neste CodePen . .container { background: tomato; display: flex; flex-flow: row …

236 html  css  flexbox 

Eu quero ter um menu vertical com uma altura específica. Cada filho deve preencher a altura dos pais e ter um texto alinhado ao meio. O número de filhos é aleatório, então eu tenho que trabalhar com valores dinâmicos. Div .containercontém um número aleatório de filhos ( .item) que sempre …

235 css  google-chrome  webkit  flexbox 

Houve perguntas e artigos sobre isso, mas nada conclusivo, até onde posso dizer. O melhor resumo que pude encontrar é O flex-base permite que você especifique o tamanho inicial / inicial do elemento, antes que qualquer outra coisa seja computada. Pode ser uma porcentagem ou um valor absoluto. ... o …

224 css  flexbox  width 

Aqui está o código que estou usando para obter o layout acima: .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px; } .main { flex: 1; display: flex; flex-direction: column; } .content { flex: 1; …

214 css  layout  multiple-columns  flexbox 

Como centralizar o texto no ReactNative tanto na horizontal quanto na vertical? Eu tenho um exemplo de aplicativo em rnplay.org, em que justifyContent = "center" e alignItems = "center" não está funcionando: https://rnplay.org/apps/AoxNKQ O texto deve estar centralizado. E por que existe uma margem na parte superior entre o texto …

212 reactjs  flexbox  react-native 

https://jsfiddle.net/vhem8scs/ É possível alinhar dois itens à esquerda e um item à direita com o flexbox? O link mostra mais claramente. O último exemplo é o que eu quero alcançar. No flexbox, tenho um bloco de código. Com float, tenho quatro blocos de código. Essa é uma das razões pelas …

212 css  alignment  flexbox 

Eu tenho 2 divs lado a lado em um flexbox. A mão direita deve sempre ter a mesma largura, e eu quero que a mão esquerda pegue o espaço restante. Mas não será, a menos que eu defina especificamente sua largura. Portanto, no momento, ele está definido como 96%, o …

204 html  css  flexbox 

Eu já li vários tutoriais do flexbox, mas ainda não consigo fazer essa tarefa simples funcionar. Como posso fazer a caixa vermelha com 100% de largura? Código: <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Natives </Text> <Text style={styles.line1}> line1 </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for …

203 flexbox  react-native 

Eu tentei estilizar um fieldsetelemento com display: flexe display: inline-flex. No entanto, não funcionou: flexcomportou - se como block, e inline-flexcomportou-se como inline-block. Isso acontece no Firefox e no Chrome, mas estranhamente funciona no IE. Isso é um bug? Não achei que fieldsetdevesse ter nenhum comportamento especial, nem no HTML5 …

201 html  css  flexbox 

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

194 css  layout  flexbox