Preguntas etiquetadas con flexbox

Para establecer la distancia mínima entre los elementos de flexbox que estoy usando margin: 0 5pxen .itemy margin: 0 -5pxen el contenedor. Para mí parece un truco, pero no puedo encontrar una mejor manera de hacerlo. Ejemplo #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: …

781 css  flexbox 

¿Hay alguna forma más flexible de alinear a la derecha el "Contacto" que usarlo position: absolute? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> …

680 html  css  flexbox 

Considere el eje principal y el eje transversal de un contenedor flexible: Fuente: W3C Para alinear elementos flexibles a lo largo del eje principal hay una propiedad: justify-content Para alinear elementos flexibles a lo largo del eje transversal, hay tres propiedades: align-content align-items align-self En la imagen de arriba, el …

678 css  flexbox  language-lawyer  w3c 

Cómo centrar div horizontalmente y verticalmente dentro del contenedor usando flexbox. En el ejemplo a continuación, quiero que cada número esté uno debajo del otro (en filas), que están centrados horizontalmente. .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; …

672 html  css  flexbox 

Estoy tratando de llenar el espacio vertical de un elemento flexible dentro de un Flexbox. .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; …

459 css  flexbox 

Tengo dos divs uno al lado del otro. Me gustaría que la altura de ellos sea la misma, y ​​que permanezca igual si uno de ellos cambia de tamaño. Sin embargo, no puedo entender esto. Ideas? Para aclarar mi pregunta confusa, me gustaría que ambas cajas tengan siempre el mismo …

441 html  css  html-table  flexbox 

Me gustaría usar flexbox para alinear verticalmente parte del contenido dentro de, <li>pero no tener gran éxito. Lo revisé en línea y muchos de los tutoriales en realidad usan un envoltorio div que obtiene la align-items:centerconfiguración de flex en el padre, pero me pregunto si es posible cortar este elemento …

425 html  css  flexbox 

Quiero tener 3 divs alineados dentro de un contenedor div, algo como esto: [[LEFT] [CENTER] [RIGHT]] El contenedor div es 100% ancho (sin ancho establecido), y el centro div debe permanecer en el centro después de cambiar el tamaño del contenedor. Entonces configuré: #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} Pero se …

392 html  css  flexbox  alignment  css-float 

Tengo un diseño simple de caja flexible con un contenedor como: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } Ahora quiero que los elementos en la última fila estén alineados con el otro. justify-content: space-between;debe usarse porque el ancho y la altura de la cuadrícula se pueden ajustar. …

379 css  flexbox  grid-layout 

Tengo un divcon algunos niños: <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div> y quiero el siguiente diseño: ------------------- |heading 1 | |heading 2 | |paragraph text | |can have many | |rows | | | | | | | |link-button | …

375 html  css  flexbox 

Intentando un navegador flexbox que tiene hasta 5 elementos y tan poco como 3, pero no divide el ancho por igual entre todos los elementos. Violín El tutorial que estoy modelando después es http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ HABLAR CON DESCARO A * { font-size: 16px; } .tabs { max-width: 1010px; width: 100%; height: …

368 html  css  flexbox 

¿Alguien puede mostrarme la diferencia entre align-itemsy align-content?

366 css  layout  flexbox  alignment 

¿Cómo alineo un elemento de la barra de navegación a la derecha? Quiero tener el inicio de sesión y registrarme a la derecha. Pero todo lo que intento no parece funcionar. Esto es lo que he intentado hasta ahora: <div>alrededor del <ul>con el atributo:style="float: right" <div>alrededor del <ul>con el atributo:style="text-align: …

341 css  twitter-bootstrap  flexbox  bootstrap-4  navbar 

Estoy tratando de alinear verticalmente elementos dentro de un contenedor de ID. Le di la propiedad display:inline-flex;a esta ID ya que el contenedor de ID es el contenedor flexible. Pero no hay diferencia en la presentación. Esperaba que se mostrara todo en la identificación del contenedor inline. ¿Por qué no …

331 css  flexbox 

Estoy tratando de centrar mi contenedor en el medio de la página usando Bootstrap 4. Hasta ahora no he tenido éxito. Cualquier ayuda sería apreciada. Lo he construido en Codepen.io para que puedan jugar con él y decirme qué funciona a partir de ideas ... Mostrar fragmento de código var …

322 html  css  twitter-bootstrap  flexbox  bootstrap-4