Preguntas etiquetadas con flexbox

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 ejemplo de "Sticky …

117 html  css  flexbox  cross-browser 

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 …

116 internet-explorer  css  flexbox  internet-explorer-11 

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 altura para mantener …

114 html  css  flexbox 

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

107 css  flexbox  css-position  sticky 

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 derecha. Y mis otros divs para seguir la regla flexible establecida por el padre. ¿Es …

103 html  css  flexbox 

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

102 html  css  flexbox 

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 admiten la versión …

101 html  css  flexbox 

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 …

101 css  flexbox  grid-layout  css-grid 

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 …

98 html  css  flexbox 

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 hacerlo sin modificar el HTML y sin recurrir …

97 css  flexbox 

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"> </div> </div> </div>

95 twitter-bootstrap  flexbox  bootstrap-4 

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 pasa al span? ¿Cuál es el enfoque correcto para evitar que se estire sin …

94 html  css  flexbox 

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 class="child">text</div> </div> Ejecutar fragmento de códigoOcultar resultadosExpandir fragmento Cuando agrego la position: absolutelínea, se …

93 css  react-native  flexbox 

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. bottom: { position: 'absolute', justifyContent: 'center', alignItems: 'center', top: …

93 position  react-native  flexbox  absolute 

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á alineado a la izquierda. Pruebe Firefox o Chrome y …

91 html  css  safari  flexbox  css-grid