Perguntas com a marcação «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 

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 

Considere o eixo principal e o eixo transversal de um contêiner flexível: Fonte: W3C Para alinhar itens flexíveis ao longo do eixo principal, existe uma propriedade: justify-content Para alinhar itens flexíveis ao longo do eixo transversal, existem três propriedades: align-content align-items align-self Na imagem acima, o eixo principal é horizontal …

676 css  flexbox  language-lawyer  w3c 

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 

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 

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 

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 

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: …

392 html  css  flexbox  alignment  css-float 

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 

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 

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 

Alguém pode me mostrar a diferença entre align-itemse align-content?

366 css  layout  flexbox  alignment 

Como alinhar um item da barra de navegação para a direita? Quero ter o login e me registrar à direita. Mas tudo o que tento parece não funcionar. Isto é o que eu tentei até agora: <div>ao redor do <ul>com o atributo:style="float: right" <div>ao redor do <ul>com o atributo:style="text-align: right" …

340 css  twitter-bootstrap  flexbox  bootstrap-4  navbar 

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 

Estou tentando centralizar meu contêiner no meio da página usando o Bootstrap 4. Até agora, não obtive êxito. Qualquer ajuda seria apreciada. Eu o construí no Codepen.io para que vocês possam brincar com ele e me informar o que funciona como eu sou sem ideias ... Mostrar snippet de código …

322 html  css  twitter-bootstrap  flexbox  bootstrap-4