Preguntas etiquetadas con flexbox

Estoy tratando de configurar un diseño de caja flexible con tres columnas donde las columnas izquierda y derecha tienen un ancho fijo, y la columna central se flexiona para llenar el espacio disponible. A pesar de establecer dimensiones para las columnas, todavía parecen encogerse a medida que se encoge la …

316 html  css  flexbox 

Tengo 4 columnas flexbox y todo funciona bien, pero cuando agrego algo de texto a una columna y lo configuro en un tamaño de fuente grande, está haciendo que la columna sea más ancha de lo que debería debido a la propiedad flex. Traté de usarlo word-break: break-wordy me ayudó, …

313 html  css  flexbox 

Puede anular align-itemscon align-selfun elemento flexible. Estoy buscando una forma de anular justify-contentun elemento flexible. Si tuviera un contenedor flexbox con justify-content:flex-end, pero desea que sea el primer elemento justify-content: flex-start, ¿cómo podría hacerse? Esto fue mejor respondido por esta publicación: https://stackoverflow.com/a/33856609/269396

283 css  flexbox 

Estoy usando un cuadro flexible para mostrar 8 elementos que cambiarán de tamaño dinámicamente con mi página. ¿Cómo lo obligo a dividir los elementos en dos filas? (4 por fila)? Aquí hay un recorte relevante: (O si prefiere jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/ ) .parent-wrapper { height: 100%; width: 100%; border: 1px …

260 html  css  flexbox 

Entonces, al intentar hacer un modo útil usando flexbox, encontré lo que parece ser un problema del navegador y me pregunto si hay una solución o solución conocida, o ideas sobre cómo resolverlo. Lo que estoy tratando de resolver tiene dos aspectos. Primero, obtener la ventana modal centrada verticalmente, que …

259 html  css  flexbox  browser-bugs 

На этот вопрос есть ответы en Stack Overflow на русском : elemento Flexbox - перенос на новую строку ¿Hay alguna manera de hacer un salto de línea en flexbox de varias líneas? Por ejemplo, para romper después de cada 3er elemento en este CodePen . .container { background: tomato; display: …

236 html  css  flexbox 

Quiero tener un menú vertical con una altura específica. Cada niño debe llenar la altura del padre y tener texto alineado en el medio. El número de hijos es aleatorio, así que tengo que trabajar con valores dinámicos. Div .containercontiene un número aleatorio de hijos ( .item) que siempre tienen …

235 css  google-chrome  webkit  flexbox 

Ha habido preguntas y artículos sobre esto, pero nada concluyente por lo que puedo decir. El mejor resumen que pude encontrar es flex-base le permite especificar el tamaño inicial / inicial del elemento, antes de calcular cualquier otra cosa. Puede ser un porcentaje o un valor absoluto. ... que en …

224 css  flexbox  width 

Aquí está el código que estoy usando para lograr el diseño anterior: .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px; } .main { flex: 1; display: flex; flex-direction: column; } .content { flex: 1; …

214 css  layout  multiple-columns  flexbox 

¿Cómo centrar el texto en ReactNative tanto en horizontal como en vertical? Tengo una aplicación de ejemplo en rnplay.org donde justifyContent = "center" y alignItems = "center" no funciona: https://rnplay.org/apps/AoxNKQ El texto debe estar centrado. ¿Y por qué hay un margen en la parte superior entre el texto (amarillo) y …

212 reactjs  flexbox  react-native 

https://jsfiddle.net/vhem8scs/ ¿Es posible tener dos elementos alineados a la izquierda y un elemento alineado a la derecha con flexbox? El enlace lo muestra más claramente. El último ejemplo es lo que quiero lograr. En flexbox tengo un bloque de código. Con float tengo cuatro bloques de código. Esa es una …

212 css  alignment  flexbox 

Tengo 2 divs uno al lado del otro en una caja flexible. El de la derecha siempre debe tener el mismo ancho, y quiero que el de la izquierda solo tome el espacio restante. Pero no lo hará a menos que establezca específicamente su ancho. Entonces, en este momento, está …

205 html  css  flexbox 

Ya he leído varios tutoriales de flexbox, pero todavía no puedo hacer que esta simple tarea funcione. ¿Cómo puedo hacer que el cuadro rojo tenga un ancho del 100%? Código: <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Natives </Text> <Text style={styles.line1}> line1 </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D …

203 flexbox  react-native 

Traté de diseñar un fieldsetelemento con display: flexydisplay: inline-flex . Sin embargo, no funcionó: se flexcomportó como blocky se inline-flexcomportó como inline-block. Esto sucede tanto en Firefox como en Chrome, pero extrañamente funciona en IE. ¿Es un error? No pude encontrar que fieldsetdebería tener un comportamiento especial, ni en HTML5 …

201 html  css  flexbox 

En un diseño de 3 filas: la fila superior debe dimensionarse de acuerdo con su contenido la fila inferior debe tener una altura fija en píxeles la fila central debe expandirse para llenar el contenedor El problema es que a medida que el contenido principal se expande, agota las filas …

196 css  layout  flexbox