Perguntas com a marcação «flexbox»

Eu quero usar o flexbox que possui algum número de itens com a mesma largura. Percebi que o flexbox distribui o espaço uniformemente, e não o próprio espaço. Por exemplo: .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } <div class="header"> <div class="item">asdfasdfasdfasdfasdfasdf</div> …

186 css  flexbox 

Considere o seguinte trecho: .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } <div class="parent"> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="child"> Lorem Ipsum is simply dummy …

176 css  internet-explorer  flexbox  internet-explorer-11 

Estou trabalhando em um layout aninhado de flexbox que deve funcionar da seguinte maneira: O nível mais externo ( ul#main) é uma lista horizontal que deve ser expandida para a direita quando mais itens forem adicionados a ela. Se crescer muito, deve haver uma barra de rolagem horizontal. #main { …

167 html  css  flexbox 

Imagine o seguinte layout, onde os pontos representam o espaço entre as caixas: [Left box]......[Center box]......[Right box] Quando removo a caixa direita, gosto que a caixa central ainda esteja no centro, da seguinte forma: [Left box]......[Center box]................. O mesmo vale para se eu remover a caixa esquerda. ................[Center box]................. Agora, …

162 html  css  flexbox  centering 

Fechado . Esta questão é baseada em opiniões . No momento, não está aceitando respostas. Deseja melhorar esta pergunta? Atualize a pergunta para que ela possa ser respondida com fatos e citações editando esta postagem . Fechado há 5 anos . Melhore esta pergunta Eu descobri recentemente Flexboxquando estava procurando …

161 html  css  twitter-bootstrap  flexbox 

O Flexbox tem esse comportamento em que estende as imagens à sua altura natural. Em outras palavras, se eu tiver um contêiner flexbox com uma imagem filho e redimensionar a largura dessa imagem, a altura não será redimensionada e a imagem será esticada. div { display: flex; flex-wrap: wrap; } …

156 html  css  flexbox 

Eu tenho um recipiente <div>com display: flex. Ele tem um filho <a>. Como posso fazer a criança parecer "inline"? Especificamente, como posso fazer com que a largura da criança seja determinada pelo seu conteúdo e não expandir para a largura do pai? O que eu tentei: Eu coloquei a criança …

154 html  css  flexbox 

CodePen: http://codepen.io/anon/pen/RPNpaP . Quero que a caixa vermelha tenha apenas 25 cm de largura quando estiver na vista lado a lado - estou tentando conseguir isso definindo o CSS dentro desta consulta de mídia: @media all and (min-width: 811px) {...} para: .flexbox .red { width: 25em; } Mas quando faço …

149 html  css  flexbox 

Eu gostaria de ter A Be Calinhado no meio. Como posso Dir completamente para a direita? ANTES: DEPOIS DE: ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 1px; padding: 5px; background: #aaa; } li:last-child { background: #ddd; /* …

147 html  css  flexbox 

Eu tenho um flexbox esquerdo-direito: .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; } <div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div> Executar snippet de códigoHide resultsExpandir snippet O problema é que a criança certa não está se comportando de maneira responsiva. Para ser …

141 css  flexbox 

Preciso implementar um layout de alvenaria bastante comum. No entanto, por várias razões, não quero usar JavaScript para fazer isso. Parâmetros: Todos os elementos têm a mesma largura Os elementos têm uma altura que não pode ser calculada no lado do servidor (uma imagem mais várias quantidades de texto) Eu …

134 html  css  flexbox  css-grid 

Como todos sabemos, a flexpropriedade é um atalho para o flex-grow, flex-shrinke as flex-basispropriedades. Seu valor padrão é 0 1 auto, o que significa flex-grow: 0; flex-shrink: 1; flex-basis: auto; mas eu notei que em muitos lugares flex: 1é usado. É uma abreviação de 1 1 autoou 1 0 auto? …

128 css  flexbox 

O código a seguir pode ser encontrado neste exemplo ao vivo Eu tenho o seguinte elemento nativo reac: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.descriptionContainerVer}> <View style={styles.descriptionContainerHor}> <Text style={styles.descriptionText} …

122 css  reactjs  react-native  flexbox 

Com CSS típico, eu poderia flutuar uma das duas colunas para a esquerda e outra para a direita com algum espaço de sarjeta no meio. Como eu faria isso com o flexbox? http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { …

121 html  css  flexbox 

Eu encontrei este tópico - Como você estica uma imagem para preencher um <div> enquanto mantém a proporção da imagem? - isso não é exatamente o que eu quero. Eu tenho um div com um determinado tamanho e uma imagem dentro dele. Eu quero sempre preencher o div com a …

120 image  css  positioning  flexbox