Articles of flexbox

Cómo establecer el color va más allá del contenedor de los lados

En el siguiente ejemplo, ¿cómo puedo establecer que el background-color de background-color de la barra lateral continúe en el lado derecho de la página? PD: Tengo que usar contenedor para centrar todo el contenido. Aquí hay un codepen . Fragmento a continuación: .container { max-width: 1366px; margin-left: auto; margin-right: auto; } .columnContainer { display: flex; […]

CSS Flexbox: reducir a lo largo del eje transversal y mostrar la barra de desplazamiento

En mi sitio web tengo un contenedor de caja flexible con una imagen (ancho y alto fijo) y un texto a su lado (sin ancho fijo). ¿Cómo puedo evitar que el texto sea más alto que la imagen y mostrar una barra de desplazamiento cuando es más alto? Por favor, vea también fragmento de código […]

¿Cómo pueden los Elementos Div tomar solo el Espacio de su Contenido interno en un CSS3 Flexbox?

Tengo la siguiente estructura HTML: Speichern Style Speichern El panel principal contiene tres elementos. El elemento en el centro siempre debe estar en el centro como se muestra aquí: Aquí está el código CSS que uso .indicator { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 150px; height: 50px; border-right: 1px solid red; z-index: […]

Las imágenes CSS Flexbox no conservan la relación de aspecto

Estoy tratando de aprender a usar Flexbox. Tengo una página con dos imágenes separadas por una barra en el medio, astackdas de arriba a abajo. Quiero que la barra permanezca del mismo tamaño independientemente del navegador y que las dos imágenes cambien de tamaño cuando el navegador se encoja (manteniendo el tamaño de la imagen […]

tener algunos problemas de diseño con Flexbox

Estoy jugando con flexbox pero todavía tengo algunos problemas. Casi tengo lo que quiero: etiqueta en la parte superior izquierda del primer contenedor etiqueta en la parte superior derecha del primer contenedor Etiqueta en la parte inferior central del primer contenedor caja que tiene “número” en la parte superior de “Etiqueta” texto en el área […]

Horizontal y verticalmente Centre el texto SOBRE una imagen HTML (Posicionamiento absoluto)

Dado el siguiente elemento de diseño, bash incluir las imágenes en html para que la opacidad pueda ser manipulada con transiciones CSS (efecto de desplazamiento). Aquí está mi solución hasta ahora: http://codepen.io/roachdesign/pen/VeQKJK/ El mayor inconveniente aquí es que estoy usando un centrado vertical manual (absoluto / superior: 40%), que se hace evidente al reducir el […]

El texto no se rompe dentro de flexbox

por alguna razón, el texto dentro de un contenedor flexible no se está rompiendo correctamente cuando el área horizontal es demasiado pequeña para mostrar. Pero incluso en el estado “normal”, ¿entonces tampoco debería romperse? ¿Qué hice mal aquí? (function () { var el; el = document.getElementById(‘clicker’); el.onclick = function () { el.classList.toggle(‘container_changed’); return null; }; […]

CSS – Mantenga la ración de racionamiento de aspecto de imagen

Tengo una pequeña galería de fotos con algunas fotos. Se ve bien en la PC (tamaño completo), pero cuando cambio el tamaño (para el teléfono), no mantiene su relación de aspecto y solo estira el con. Esto es lo que parece ahora: https://gyazo.com/a1f605bb410865579025644b0a267adf Además, como puede ver, va a 1 imagen, y en cierto punto […]

Astackmiento vertical del texto transformado con Sass CSS y FlexBox

Con FlexBox y Sass, bash crear barras verticales astackdas como se muestra en las imágenes pegadas a continuación. Lo que espero es que el texto vertical ocupe la fila de una columna, creando un efecto de astackmiento. Lo que está sucediendo, sin embargo, es que el texto se superpone. La marca html es así: Another […]

Traduciendo un div completamente posicionado

Tengo esta posición de esta manera, el problema es traducir cada div basado en lo que tengo. el css es como: .col-md-12 { display: flex; flex-wrap: wrap; } .col-md-12 input:checked + label { color: red; } .col-md-12 input:checked + label + div.slider { color: red; } .col-md-12 div.slide-1 { left: -100%; } .col-md-12 div.slide-2 { […]