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.
112
perguntas
-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 ...
-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
...
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?
-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: ...
-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-...
-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='...
-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. ...
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;
...
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 ...
-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.
....
-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 ...
-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 ...
-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> ...
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?
-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 {
...
-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="...
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 {
...
-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.
...
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 ...
-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=&...
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;
...
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ó ...
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 ...
-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 {
...
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>...
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 ...
-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, ...
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;
}
...
-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=&...
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 ...
-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 ...
-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
-----------------------------------...
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 ...
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 ...
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;
...
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&...
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 ...
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 {
...
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.
...
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: ...
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 ...
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 ...
-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: ...
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 , ...
-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?
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 ...
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 ...
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>...
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 ...
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 {...