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...
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...
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 (...
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:...
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 la imagen sin tener en cuenta...
Estoy planeando alejarme de los diseños "flotantes" y usar CSS flexbox para proyectos futuros. Me encantó ver que todos los principales navegadores en sus versiones actuales parecen admitir (de una forma u otra) flexbox. Me dirigí a "Resuelto por Flexbox" para ver algunos ejemplos. Sin embargo, el...
Tengo una página web simple con contenido de Lipsum que se centra en la página. La página funciona bien en Chrome y Firefox. Si reduzco el tamaño de la ventana, el contenido llena la ventana hasta que no puede y luego agrega una barra de desplazamiento y llena el contenido fuera de la pantalla,...
Usando el modelo de caja flexible CSS, ¿cómo puedo forzar una imagen a mantener su relación de aspecto? JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/ Observe que las imágenes se estiran o encogen para llenar el ancho del contenedor. Está bien, pero ¿podemos hacer que también se estire o encoja la...
Estuve atascado en esto por un tiempo y pensé en compartir esto position: sticky+ flexbox gotcha: Mi div pegajoso funcionaba bien hasta que cambié mi vista a un contenedor de caja flexible, y de repente el div no estaba pegajoso cuando estaba envuelto en un padre flexbox. .flexbox-wrapper {...
tengo un <div class="parent"> <div class="child" style="float:right"> Ignore parent? </div> <div> another child </div> </div> El padre tiene .parent { display: flex; } Para mi primer hijo, quiero simplemente hacer flotar el artículo hacia la...
¿Cómo puedo saber que una fila de diseño de caja flexible consume el espacio vertical restante en una ventana del navegador? Tengo un diseño de caja flexible de 3 filas. Las dos primeras filas son de altura fija, pero la tercera es dinámica y me gustaría que creciera hasta la altura completa del...
Entiendo que esto es imposible de lograr usando Flexbox, ya que cada fila solo puede tener la altura mínima requerida para adaptarse a sus elementos, pero ¿se puede lograr usando la nueva CSS Grid? Para ser claros, quiero la misma altura para todos los elementos en una cuadrícula en todas las...
Quiero usar una aplicación de altura completa usando flexbox. Encontré lo que quiero usando el antiguo módulo de diseño de flexbox ( display: box;y otras cosas) en este enlace: aplicación CSS3 Flexbox de altura completa y desbordamiento Esta es una solución correcta para los navegadores que solo...
He usado el diseño de caja flexible CSS que aparece como se muestra a continuación: Si la pantalla se vuelve más pequeña, se convierte en esto: El problema es que las imágenes no se redimensionan manteniendo la relación de aspecto de la imagen original. ¿Es posible usar CSS puro y el...
Esta pregunta se refiere a un navegador con compatibilidad completa con css3, incluido flexbox. Tengo un contenedor flexible con algunos artículos. Todos están justificados para flex-start pero quiero que el último .end elemento esté justificado para flex-end. ¿Existe una buena forma de...
Necesito ayuda para solucionar el problema, necesito centrar el contenido dentro de la columna en bootstrap4, encuentre mi código a continuación <div class="container"> <div class="row justify-content-center"> <div class="col-3"> <div class="nauk-info-connections">...
Muestra: div { display: flex; height: 200px; background: tan; } span { background: red; } <div> <span>This is some text.</span> </div> Ejecutar fragmento de códigoOcultar resultadosExpandir fragmento Tengo dos preguntas, por favor: ¿Por qué básicamente le...
Parece que con el position:absoluteuso un elemento no se puede centrar usando justifyContento alignItems. Existe una solución alternativa, marginLeftpero no muestra lo mismo para todos los dispositivos, incluso si se utilizan dimensiones para detectar la altura y el ancho del dispositivo....
Quiero hacer un divpalo en la parte superior de la pantalla sin ninguna influencia sobre otros elementos, y su elemento hijo en el centro. .parent { display: flex; justify-content: center; position: absolute; } <div class="parent"> <div
Estoy tratando de centrar los elementos internos de una <button>etiqueta con flexbox justify-content: center. Pero Safari no los centra. Puedo aplicar el mismo estilo a cualquier otra etiqueta y funciona según lo previsto (consulte la <p>etiqueta -etiqueta). Solo el botón está...