Skip to main content

Perguntas com a tag [flexbox]

Flex-box ou layout de caixa flexível é um modelo de layout da Web CSS3, que permite que elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela.

Filtrar por
Ordenado por
Com tags
-2 votos
1 resposta
85 visitas

CSS Flex - Alinhar imagem aos textos

Quero alinhar a imagem aos textos lateralmente de forma que a tag fique lateralmente ao topo da imagem conforme a linha vermelha na imagem e a tag fique abaixo do conforme a linha verde. Imagem de ...
Daniel Santos's user avatar
-1 votos
1 resposta
36 visitas

Como deixo esses botões do lado da caixa de texto, usando flexbox?

HTML: Produtos | Cadastro Home Pesquisar Cadastrar Produto Produto Marca Valor ...
Programador iniciante's user avatar
0 votos
0 respostas
26 visitas

Como funciona align-content e align-items? [duplicada]

Se entendi direito align-content só tem efeito quando flex-wrap: wrap está aplicado deixando o contêiner flex em multilinhas, enquanto o align-items só funciona quando é uma única linha, seria isso?
Wizarsy's user avatar
-2 votos
2 respostas
60 visitas

Div desalinhadas na base

Galera, tenho um h2 e um p dentro de uma mesma div e gostaria que os dois ficassem alinhados pela base. Inseri os seguintes atributos na div pai: .banner--text { display: flex; align-items: ...
Smdk's user avatar
  • 1
-2 votos
1 resposta
79 visitas

Formatação GRID

Eu to tentando fazer uma pagina com 4 elementos porem com um espaçamento mt especifico . <html lang="en"> <head> <meta charset="UTF-8"> <meta http-...
Dezorientado 's user avatar
-1 votos
1 resposta
68 visitas

Como usar o reverse apenas em alguns itens no flexbox

Estou querendo montar um conteúdo como esse: Fiz dessa forma: <div class='hFlex layout center start-justified workflow_wrapper nb-border wrap nb-padding-10 around-justified'> <div class='...
Rodrigo Luan's user avatar
-1 votos
1 resposta
1mil visitas

Como limitar o tamanho do conteúdo pelo tamanho da div no flexbox

Opa, eu dei uma pesquisada por aqui e não consegui achar algo que resolvesse. Meu problema é, sempre que eu coloco um texto nos elementos que eu criei o tamanho respeita o conteúdo e não o contrário. ...
Daniel Fabre's user avatar
2 votos
1 resposta
139 visitas

Aprendendo Flexbox e querendo entender um comportamento do meu código

Opa, tudo bem? Eu comecei tem um tempo a estudar html/css/js então eu ainda estou aprendendo e estou com uma certa dificuldade pra entender o porquê de um comportamento aqui. *{ margin: 0; ...
Daniel Fabre's user avatar
4 votos
1 resposta
76 visitas

É possível utilizar elipses com Flexbox?

Tenho um card de largura variável (no exemplo deixei fixo) com um texto alinhado a esquerda e um botão alinhado a direita na mesma linha, queria que o texto ocupasse toda a largura disponível em uma ...
Costamilam's user avatar
  • 10,1mil
-3 votos
1 resposta
47 visitas

Duvida de posicionamento

Estou com uma duvida de posicionamento, gostaria de passar apenas a option2 para a direita sem que o espaçamento entre label e option 1 fosse alterado, estou usando um container com flexbox. ....
Douglas Carlos Camargo's user avatar
-3 votos
1 resposta
1mil visitas

Centralizar flexbox

Olá, sou novato em CSS3/HTML5/JAVASCRIPT, estou cursando diversos relativos a estas linguagens, porém fiquei em duvida relativa a centralização de um flex; O do professor centralizava e aparentemente ...
Wesley Intelligence's user avatar
-2 votos
1 resposta
176 visitas

problemas ao redimensionar um elemento [fechada]

Estou fazendo uns testes com flexbox e me deparei com um certo problema. Ao definir o body como flex, as divs dentro do section não se redimensionam ao definirmos seu tamanho com o width. Mas se ...
flexUser's user avatar
-1 votos
1 resposta
42 visitas

Não consigo realizar meu dropdown menu

Nessa situação não consigo posicionar os elementos <li> abaixo de informática de forma responsiva. Estou a fim de criar um dropdown menu mas não faço ideia de como posicionar os <li's> ...
AtomicFeasT's user avatar
5 votos
1 resposta
5mil visitas

Qual a diferença entre align-items e align-content?

Existe alguma diferença entre o align-items e o align-content?
Lucas Henrique's user avatar
-1 votos
1 resposta
337 visitas

Como deixar minha lista dentro do card com tamanho responsivo!

Gostaria de deixar o conteúdo em destaque dentro do card e não sair para fora, pois quando se deixa a tela pequena eles acabam saindo. Fiz meu site utilizando flexbox como base. body { ...
João Túlio Soares Batista's user avatar
-2 votos
2 respostas
1mil visitas

Tentando colocar as imagens uma ao lado da outra com o display; flex [fechada]

<section class="flex"> <div><img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco</div> <div><img src="...
romao's user avatar
  • 1
0 votos
1 resposta
80 visitas

comportamento de containers aninhados

Porque o text-align=center de um container reflete também em seu container interno? .container-externo { border: 1px solid red; display: flex; text-align: center; } .container-interno { ...
Joabe's user avatar
  • 1
-1 votos
1 resposta
693 visitas

"justify-content: space-between;" não está funcionando - Flexbox

Olá. Tudo bem? Estou criando uma caixa com três itens. Um precisa estar colado na parte superior, outro no meio e outro colado na parte inferior, para a base do layout que estou precisando fazer. ...
Thiago Santos's user avatar
4 votos
1 resposta
166 visitas

Dúvida em relação ao CSS Grid e Firefox

Boa noite. Recentemente comecei a estudar CSS, porém quando estava fazendo um exercício me deparei com uma situação inusitada, estou utilizando CSS Grid juntamente com Flexbox, quando renderizo meu ...
laura-2035's user avatar
-2 votos
1 resposta
160 visitas

Por que meu display - flex não está funcionando? [fechada]

o código HTML é este aqui- Queria colocar um display flex apenas no "forms2" para os inputs ficarem em row. Oque devo fazer? <div class="forms1"> <div class=&...
Thierno dia's user avatar
2 votos
2 respostas
1mil visitas

Como impedir que uma div com display flex encolha os elementos filhos?

Eu fiz o seguinte código de exemplo: .container { width: 200px; height: 50px; background-color: #f00; display: flex; flex-direction: row; overflow-x: scroll; } .div1 { width: 150px; ...
Mario Fabre's user avatar
3 votos
3 respostas
521 visitas

Problemas ao centralizar um conteúdo ao trabalhar com flexbox no CSS

Estou tentando aprender CSS e me deparei com flexbox e não estou conseguindo trabalhar com os tutoriais que vejo na internet. O objetivo era centralizar, eixo X e Y, 3 quadrados na pagina, mas só ...
João Augusto Moreira Ananias's user avatar
1 voto
2 respostas
788 visitas

Mover elemento para cima em 50% de seu tamanho

Como eu poderia fazer uma sobreposição vertical do Flexbox? Quero fazer com que metade do circulo fique dentro do item acima. html, body { height: 100%; } body { background: #8844ee; } .card ...
Huberth's user avatar
  • 31
-1 votos
2 respostas
2mil visitas

Quebrar a DIV em 3, ou mais, com colunas de tamanhos diferentes [fechada]

Qual a melhor prática para contornar esse problema da imagem abaixo? .flex-box { display: flex; align-items: center; justify-content: center; flex-flow: wrap; } .container-box { ...
Eduardo Louzada's user avatar
0 votos
1 resposta
20 visitas

Precisava de ajuda sobre posicionamento com flexbox

<div class"container"> <header> <nav class="menu"> <h1 class="logo">Commerce</h1> <ul class=menuLinks> <li>...
Felipe Bruno's user avatar
1 voto
1 resposta
654 visitas

Flexbox Horizontal List

Boa tarde pessoal! Estou querendo alinhar uma lista ul de forma que seus li fiquem a esquerda e o último li fique a direita. Não estou conseguindo fazer isso, alguém poderia me ajudar. Eu poderia ...
Tandy's user avatar
  • 29
-1 votos
1 resposta
2mil visitas

Problema com a formatação de TextInput no React Native

Tenho o seguinte componente do React Native que é uma tela para preencher dados de uma atividade: import React, { useState } from 'react'; import { View, Text, TextInput, TouchableOpacity, Switch, ...
Pedro Vinicius's user avatar
2 votos
1 resposta
969 visitas

Colocar os items do menu dentro da div

Tenho o seguinte código: .top-content { background-color: #fff; border: 1px solid #e07b39; height: 69px; } .nav-list { display: flex; justify-content: flex-end; list-style: none; } ...
user221459's user avatar
-1 votos
1 resposta
122 visitas

Paragrafo dentro de flex-item overflowing [duplicada]

Estou fazendo um flex layout e no paragrafo dentro do article, o texto nao esta ficando dentro do card mas está overflowing. Qual o problema do meu código? HTML: <!DOCTYPE html> <html lang=&...
Jao O Leigo's user avatar
0 votos
1 resposta
464 visitas

Alterar altura da coluna mantendo a base CSS

Estou tendo problemas ao aumentar gradativamente as colunas. Eu quero que o resultado seja o mesmo da imagem abaixo: Tentei mudar a altura de cada uma, só que a base está aumentando a largura (o que ...
AlvaroMendes's user avatar
-2 votos
1 resposta
330 visitas

Como alinhar corretamente uma galeria de itens com flexbox?

Estou começando a usar CSS flex, e percebi que quando centralizamos um container, parece que os elementos dentro do container parecem ficar centralizados, porém se eu alinho ele para direita, o ...
Ivan Ferrer's user avatar
  • 12,2mil
-2 votos
3 respostas
1mil visitas

Criar várias colunas de Lis dinâmicas com flex-direction: column; deixando o primeiro filho com width proporcional a quantidade de colunas

Objetivo: Criar várias colunas dinâmicas de lis, mais o primeiro filho tem que ter o width de 100%. Problema: O primeiro filho está quebrando todas as colunas de lis -----------------------------------...
Caio Willian's user avatar
2 votos
1 resposta
68 visitas

Qual o comportamento da propriedade "order" quando não definida?

Meu objetivo é o seguinte: O site possui uma área de compra que exibe 3 diferentes planos. Quando esta área de planos é acessada em uma tela maior do que 800px de largura, ela é exibida da seguinte ...
Ricardo Passos's user avatar
0 votos
1 resposta
922 visitas

Como retirar o espaço entre duas divs?

Já pesquisei aqui pelo SOF mas os problemas que apareceram não se assemelhavam ao meu, portanto gostaria de saber oq eu fiz de errado aqui: Quero saber como remover esse espaço entre as duas divs ...
Danilo Costa's user avatar
0 votos
0 respostas
1mil visitas

Como criar uma caixa dentro da outra usando div [duplicada]

Tenho o seguinte codigo em html: .outer-box { width: 300px; height: 250px; margin: 50px auto; background-color: black; } .inner-box { width: 200px; height: 200px; ...
user221459's user avatar
0 votos
1 resposta
518 visitas

como colorir as caixinhas duma grid 3 por 2 em css

Tenho o seguinte codigo em html: <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div&...
user221459's user avatar
1 voto
1 resposta
5mil visitas

Flexbox max-width 100%

Estou estudando sobre flexbox e tentei montar uma estrutura com flex layout ao qual eu tenho um container que preenche toda a minha página, dentro deste container eu tenho dois elementos, uma sidebar ...
Anderson Santos's user avatar
0 votos
2 respostas
2mil visitas

Como centrar e trocar a ordem em flexbox

Preciso fazer algo como está na imagem só que não estou conseguindo trocar a ordem da 2ª coluna e centrar o texto e o titulo também não estou conseguindo colocar aquela linha cinza. body { ...
user avatar
1 voto
1 resposta
1mil visitas

Preciso fazer uma tabela em flexbox

Eu fiz o seguinte codigo eu não estou conseguindo centrar as imagens que estão no meio e tambem não estou conseguindo dar padding na ultima na ultima coluna preciso fazer algo como está na imagem. ...
Tiago Dinis's user avatar
4 votos
1 resposta
51 visitas

Como fazer scroll com 3 divs

Estou enfrentando um problema de scroll .div-pai { margin: 30px; background-color: red; width: 300px; height: 300px; padding: 3px; overflow: auto; } .linha { padding: ...
Guilherme Nunes's user avatar
0 votos
0 respostas
536 visitas

Quanto de cada flex item a propriedade flex-shrink irá reduzir quando os itens tem tamanhos diferentes?

Galera, tudo bom com vocês? Estou estudando o CSS flexbox e na parte sobre a flexibilidade que cada item pode ter fiquei com a seguinte dúvida: No exemplo em anexo, os itens ultrapassam 150px do seu ...
Enkindu Weles's user avatar
0 votos
1 resposta
914 visitas

Problemas ao definir tamanhos nos itens flexbox

Sou leiga em flexbox, e to com dificuldade em alinhar os itens dentro do flex, determinei tamanho pra eles, mas na hora de posicionar, eles não ficam iguais, sempre ficam diferentes e quero um padrão ...
LauraDevCode's user avatar
-1 votos
1 resposta
4mil visitas

Como deixar a imagem a esquerda e o texto ao lado [fechada]

Boa Tarde, estou praticando flexbox utilizando o site da IGN Brasil como inspiração e quero fazer algo assim: Onde a imagem fica de um lado e o conteudo fica ao lado dela, tentei utilizar display: ...
Cauã's user avatar
  • 43
2 votos
0 respostas
74 visitas

Imagem se expandindo pela minha div [fechada]

Olá, estou iniciando em CSS, e resolvi criar este layout, porem depois de definido meu flexbox minha imagem central (dado) esta ocupando todo o espaço da div, como se houvesse outra imagem por trás , ...
user avatar
-2 votos
2 respostas
885 visitas

Qual a diferença entre centralizar com "align-items: center" ou "margin"?

Eu vi que é possível centralizar uma div ou img com display:flex, align-items: center ou com o margin. Qual a diferença entre esses dois para centralizar?
Renata Olsen's user avatar
0 votos
1 resposta
244 visitas

Como "desalinhar" as divs com Flexbox? [duplicada]

Boa noite, pessoal. Estou há um bom tempo tomando uma surra do flexbox, pois não consigo "desalinhar" as minhas divs e deixá-las sem o espaço vertical quando uma div é maior que a outra. Alguém sabe ...
Ytalo Gabriel's user avatar
1 voto
1 resposta
2mil visitas

Como alinhar botões com flexbox no Angular?

Estou com dificuldade para alinhar os botões em uma tela usando flexbox. Já tentei várias combinações da propriedade fxLayoutAlign mas não consigo o resultado esperado. O que pretendo fazer é alinhar ...
Claudivan Moreira's user avatar
0 votos
1 resposta
91 visitas

Como fazer quebrar os filhos alinhados com flexbox?

Como faço para que os filhos 4 5 6 fiquem abaixo da 1 2 3 quando o site estiver em modo tablet ? <!DOCTYPE html> <html lang="pt-br"> <head> <title>flexbox</title>...
Nelson Marques's user avatar
0 votos
2 respostas
76 visitas

Como criar uma div com height com uma valor prescrito que diminui ao redirecionar a tela

Estou com dificuldade em criar uma div no qual a largura é de 580px com a media query em 767px, quando vou diminuindo a tela a div continua fixa no mesmo valor do height. Como eu faço para que a gif ...
Nelson Marques's user avatar
0 votos
2 respostas
740 visitas

Alinhamento vertical Flex [duplicada]

Não consigo alinhar os blocos verticalmente depois que é quebrado a linha, ficam muito afastados: <style> body{ background:black; } .flex-start { align-self:flex-start; } .wrap {...
Jonathan's user avatar