Preguntas etiquetadas con flexbox

Quiero usar flexbox que tiene una cierta cantidad de elementos que son todos del mismo ancho. Me di cuenta de que flexbox distribuye el espacio de manera uniforme, en lugar del espacio en sí. Por ejemplo: .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid …

186 css  flexbox 

Considere el siguiente fragmento: .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 

Estoy trabajando en un diseño de caja flexible anidado que debería funcionar de la siguiente manera: El nivel más externo ( ul#main) es una lista horizontal que debe expandirse a la derecha cuando se le agregan más elementos. Si crece demasiado, debe haber una barra de desplazamiento horizontal. #main { …

167 html  css  flexbox 

Imagine el siguiente diseño, donde los puntos representan el espacio entre los cuadros: [Left box]......[Center box]......[Right box] Cuando elimino el cuadro derecho, me gusta que el cuadro central todavía esté en el centro, así: [Left box]......[Center box]................. Lo mismo ocurre si quitara el cuadro de la izquierda. ................[Center box]................. Ahora, …

162 html  css  flexbox  centering 

Cerrada . Esta pregunta está basada en la opinión . Actualmente no está aceptando respuestas. ¿Quieres mejorar esta pregunta? Actualice la pregunta para que pueda ser respondida con hechos y citas editando esta publicación . Cerrado hace 5 años . Mejora esta pregunta Recientemente descubrí Flexboxcuando estaba buscando una solución …

161 html  css  twitter-bootstrap  flexbox 

Flexbox tiene este comportamiento donde estira las imágenes a su altura natural. En otras palabras, si tengo un contenedor de flexbox con una imagen secundaria, y cambio el tamaño de esa imagen, la altura no cambia en absoluto y la imagen se estira. div { display: flex; flex-wrap: wrap; } …

156 html  css  flexbox 

Tengo un contenedor <div>con display: flex. Tiene un hijo <a>. ¿Cómo puedo hacer que el niño parezca "en línea"? Específicamente, ¿cómo puedo determinar el ancho del niño según su contenido y no expandirlo al ancho del padre? Lo que probé: Puse al niño a display: inline-flex, pero aún ocupaba todo …

154 html  css  flexbox 

CodePen: http://codepen.io/anon/pen/RPNpaP . Quiero que el cuadro rojo tenga solo 25 em de ancho cuando está en la vista de lado a lado; estoy tratando de lograr esto configurando el CSS dentro de esta consulta de medios: @media all and (min-width: 811px) {...} a: .flexbox .red { width: 25em; } …

149 html  css  flexbox 

Me gustaría tener A By Calineado en el medio. ¿Cómo puedo llegar Da ir completamente a la derecha? ANTES DE: DESPUÉS: 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: …

147 html  css  flexbox 

Tengo una flexbox izquierda-derecha: .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> Ejecutar fragmento de códigoOcultar resultadosExpandir fragmento El problema es que el niño correcto no se comporta de manera receptiva. Para ser específico, quiero …

141 css  flexbox 

Necesito implementar un diseño de mampostería bastante descuidado. Sin embargo, por varias razones, no quiero usar JavaScript para hacerlo. Parámetros: Todos los elementos tienen el mismo ancho. Los elementos tienen una altura que no se puede calcular del lado del servidor (una imagen más varias cantidades de texto) Puedo vivir …

134 html  css  flexbox  css-grid 

Como todos sabemos, la flexpropiedad es una abreviatura para el flex-grow, flex-shrinky las flex-basispropiedades. Su valor predeterminado es 0 1 auto, lo que significa flex-grow: 0; flex-shrink: 1; flex-basis: auto; pero he notado que en muchos lugares flex: 1se usa. ¿Es una abreviatura de 1 1 autoo 1 0 auto? …

129 css  flexbox 

El siguiente código se puede encontrar en este ejemplo en vivo Tengo el siguiente elemento nativo de reacción: '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 

Con CSS típico, podría hacer flotar una de las dos columnas a la izquierda y otra a la derecha con un espacio intermedio. ¿Cómo haría eso con flexbox? http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { width: 20%; border: solid …

121 html  css  flexbox 

Encontré este hilo: ¿Cómo se estira una imagen para llenar un <div> mientras se mantiene la relación de aspecto de la imagen? - eso no es del todo lo que quiero. Tengo un div con cierto tamaño y una imagen dentro de él. Quiero siempre llene el siguiente div con …

120 image  css  positioning  flexbox