Perguntas com a marcação «flexbox»

Módulo CSS para layouts flexíveis, fornecendo uma ampla gama de opções para alinhar elementos, eliminando a necessidade de flutuadores e tabelas.

30
Melhor maneira de definir a distância entre itens flexbox
Para definir a distância mínima entre itens flexbox que estou usando margin: 0 5pxno .iteme margin: 0 -5pxno recipiente. Para mim, parece um hack, mas não consigo encontrar uma maneira melhor de fazer isso. Exemplo #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: …
781 css  flexbox 

12
Como alinhar à direita o item flexível?
Existe uma maneira mais flexível de alinhar o "Contato" do que usar position: absolute? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a …
680 html  css  flexbox 


12
Flexbox: centralize horizontalmente e verticalmente
Como centralizar a div horizontalmente e verticalmente dentro do contêiner usando o flexbox. No exemplo abaixo, quero cada número abaixo um do outro (em linhas), centralizado horizontalmente. .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: …
672 html  css  flexbox 

10
Como posso tornar os filhos do Flexbox com 100% de altura dos pais?
Estou tentando preencher o espaço vertical de um item flexível dentro de um Flexbox. .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } …
459 css  flexbox 

22
Como mantenho duas divs lado a lado da mesma altura?
Eu tenho dois divs lado a lado. Eu gostaria que a altura deles fosse a mesma e permanecesse a mesma se um deles fosse redimensionado. Mas não consigo descobrir isso. Ideias? Para esclarecer minha pergunta confusa, eu gostaria que as duas caixas tivessem sempre o mesmo tamanho; portanto, se uma …
441 html  css  html-table  flexbox 

8
Como alinhar verticalmente o texto dentro de uma caixa flexível?
Gostaria de usar o flexbox para alinhar verticalmente algum conteúdo dentro de um, <li>mas sem grande sucesso. Eu verifiquei online e muitos dos tutoriais realmente usam uma div de wrapper que obtém as align-items:centerconfigurações flex no pai, mas estou pensando se é possível cortar esse elemento adicional? Optei por usar …
424 html  css  flexbox 

18
Como alinhar 3 divs (esquerda / centro / direita) dentro de outra div?
Eu quero ter 3 divs alinhados dentro de um container div, algo como isto: [[LEFT] [CENTER] [RIGHT]] A div do contêiner tem 100% de largura (sem largura definida), e a div central deve permanecer no centro após redimensionar o contêiner. Então eu defino: #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} Mas torna-se: …

27
Caixa flexível: alinhar a última linha à grade
Eu tenho um layout simples de caixa flexível com um contêiner como: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } Agora, quero que os itens na última linha estejam alinhados com os outros. justify-content: space-between;deve ser usado porque a largura e a altura da grade podem ser ajustadas. …
379 css  flexbox  grid-layout 

8
Alinhar um elemento ao fundo com o flexbox
Eu tenho um divcom algumas crianças: <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div> e eu quero o seguinte layout: ------------------- |heading 1 | |heading 2 | |paragraph text | |can have many | |rows | | | | | | | …
375 html  css  flexbox 

2
Flexbox não dando largura igual aos elementos
Tentativa de uma navegação flexbox com até 5 itens e menos de 3, mas não está dividindo a largura igualmente entre todos os elementos. Violino O tutorial que estou modelando é o seguinte: http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ SASS * { font-size: 16px; } .tabs { max-width: 1010px; width: 100%; height: 5rem; border-bottom: solid …
368 html  css  flexbox 



7
Qual é a diferença entre display: inline-flex e display: flex?
Estou tentando alinhar verticalmente elementos dentro de um invólucro de identificação. Eu dei a propriedade display:inline-flex;para esse ID, pois o wrapper de ID é o contêiner flex. Mas não há diferença na apresentação. Eu esperava que tudo no ID do wrapper fosse exibido inline. Por que não é? #wrapper { …
331 css  flexbox 


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.