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.

25 perguntas sem resposta aceita nem com voto a favor
Filtrar por
Ordenado por
Com tags
2 votos
1 resposta
136 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
1 voto
0 respostas
96 visitas

Forçar cabeçalho de tabela seguir largura das demais colunas dinamicamente

Estou usando flexbox para fazer tudo no site, inclusive a tabela, primeiramente tentei usando a estrutura básica de uma tabela (thead, tbody e tfoot), porém não consegui, então tentei fazer com ...
Leonardo's user avatar
  • 9.360
1 voto
1 resposta
4mil 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
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
0 votos
1 resposta
406 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
0 votos
0 respostas
501 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
84 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
75 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
0 respostas
68 visitas

justifyContent: 'flex-end' não alinha na base

Estou tentando adicionar uma barra com valor do produto na parte inferior da aplicação, utilizando o justifyContent: 'flex-end' porém o conteúdo não desce, fica colado na View que vem acima. O código ...
Renan Bicudo Ferrari's user avatar
0 votos
0 respostas
165 visitas

Overflow scroll e flex juntos

Olá, estou tentando aplicar um overflow scroll em um elemento que esta sendo posicionado com flex, mas notei que não está funcionando, pois ele está expandindo até comportar todos os seus elementos (...
NathanPB's user avatar
  • 328
0 votos
0 respostas
209 visitas

Lista de produtos com carousel e flexbox

Ola pessoal estou precisando de um auxilio para exibir uma lista de produtos responsivo que inicialmente sera 4 x 4 em telas de computadores (podendo ser alterado conforme a necessidade). O código que ...
Sulivan Tavares Leite's user avatar
0 votos
1 resposta
224 visitas

Width Percentual Flexbox

Estou com dificuldade em definir items utilizando Flexbox. O que preciso fazer é deixar meu item em 90%, atualmente estou fazendo assim, porem não funciona. <View> <ScrollView ...
Rafael Augusto's user avatar
0 votos
1 resposta
468 visitas

Tabbar React Native

Estou com dificuldade para posicionar um component de tabbar que estou fazendo. Home.js import React, {Component} from 'react' import {View, Text, ScrollView} from 'react-native' import Header from '...
Rafael Augusto's user avatar
0 votos
1 resposta
41 visitas

Não consigo fazer um elemento ter um wrap em um layout responsivo

Boa tarde, estou tentando tornar um layout responsivo mas não consigo fazer a descrição do produto ir para debaixo da imagem quando o espaço disponível for pequeno demais. Já tentei com display:flex e ...
Felipe Lima's user avatar
0 votos
1 resposta
53 visitas

Problema com o Flexbox no Firefox

Estava fazendo um Formulario que tem que ficar na horizontal e que os inputs dentro dele sejam responsivos. Fiz o codigo no Chrome funciona perfeitamente porem o meu problema e com o Firefox, ...
Sodizx's user avatar
  • 1
0 votos
1 resposta
74 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
927 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
-1 votos
1 resposta
39 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
-1 votos
1 resposta
29 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
-1 votos
1 resposta
57 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
-2 votos
0 respostas
14 visitas

Linha do flexbox com espaço vazio

Eu estou desenvolvendo um blog pessoal. Na página de início, há um container com flexbox que exibe as postagens, como mostrado nesta imagem. No entanto, estou tendo alguns problemas relativos à ...
sergiodantasz's user avatar
-2 votos
1 resposta
74 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
-2 votos
3 respostas
965 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
2 respostas
58 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
-3 votos
1 resposta
845 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