guia examples contenedor bootstrap html css css3 flexbox

html - examples - flexbox guia



Horizontalmente centro el elemento flexible entre 2 elementos flexibles de diferentes anchuras (4)

Esta pregunta ya tiene una respuesta aquí:

Digamos que tengo 3 divs mostrados horizontalmente con flexbox :

| |-div1-| |-center-div-| |-wider-div-| |

Y quiero que el centro div esté alineado con el centro del padre. ¿Cómo puedo lograr esto? justify-content centrará los 3 de los divs basándose en la suma de todos sus anchos, y aplicar align-self: center al div del medio no hace nada porque la propiedad de align manipula el posicionamiento en el otro eje.

¿Hay una solución de CSS receptiva o debería recurrir a jQuery?

ul { display: flex; justify-content: center; width: 100%; background-color: purple; } li { background-color: red; border: 5px solid blue; list-style: none; }

<ul> <li><a href = "#">short</a></li> <li><a href = "#">want center</a></li> <li><a href = "#">loooooooooooooooooong</a></li> </ul>

Ilustración de este problema: https://jsfiddle.net/7w8mp8Lj/2/


Puede establecer la primera y última li para crecer flex: 1 , y establecer como a bloque en línea y texto alinear 1/2/3 li como derecha / centro / izquierda.

jsfiddle

ul { display: flex; justify-content: center; width: 100%; background-color: purple; list-style: none; padding: 0; } li:nth-child(1) { text-align: right; flex: 1; } li:nth-child(2) { text-align: center; } li:nth-child(3) { text-align: left; flex: 1; } li a { display: inline-block; background-color: red; border: 5px solid blue; }

<ul> <li><a href="#">short</a></li> <li><a href="#">want center</a></li> <li><a href="#">loooooooooooooooooong</a></li> </ul>


Puede usar el posicionamiento absoluto para sacar los artículos no centrados del flujo de salida, de modo que no afecten el centrado.

ul { display: flex; justify-content: center; background-color: purple; padding: 0; list-style: none; } li { position: relative; } li > a { display: block; background-color: red; border: 5px solid blue; } li:first-child > a { position: absolute; right: 0; } li:last-child > a { position: absolute; left: 0; }

<ul> <li><a href="#">short</a></li> <li><a href="#">want center</a></li> <li><a href="#">loooooooooooooooooong</a></li> </ul>

Sin embargo, tenga en cuenta que perderá flexibilidad debido a que los hijos de un contenedor de flexión absolutamente posicionados no participan en el diseño de flexión (excepto en el paso de reordenación).


Utilizo un contenedor flexible con tres cajas en el interior, dos de las cuales, izquierda y derecha, tienen el mismo ancho y son contenedores flexibles, envolviendo el contenido de ancho arbitrario:

[(a box) ] [centered content] [ (a longer box)] left wrapper right wrapper

Aquí está el código:

<div class="test"> <div class="wrapper left"> <div class="box one"></div> </div> <div class="box two"></div> <div class="wrapper right"> <div class="box three"></div> </div> </div>

CSS:

.test { height: 50px; display: flex; justify-content: center; } .wrapper { width: 33%; display: flex; } .wrapper.left { justify-content: flex-end; } .box { border: 1px solid red; } .one { width: 100px; } .two { width: 50px; } .three { width: 150px; }


Aquí hay un método flexible que centra perfectamente el artículo medio con:

  • no jQuery
  • sin posicionamiento absoluto
  • sin cambios al HTML

ul { display: flex; padding: 0; } li { display: flex; justify-content: center; flex: 1; background-color: red; border: 2px solid blue; } li:first-child > a { margin-right: auto; } li:last-child > a { margin-left: auto; }

<ul> <li> <a href="#">short</a> </li> <li> <a href="#">want center</a> </li> <li> <a href="#">loooooooooooooooooong</a> </li> </ul>

jsFiddle

Así es como funciona:

  • El ul es el contenedor primario de flexión.
  • Cada elemento li flex recibe flex: 1 para una distribución igual de espacio contenedor.
  • Ahora los li s están consumiendo todo el espacio en la fila y tienen el mismo ancho.
  • Haga que cada li un contenedor flexible y añada justify-content: center
  • Ahora cada elemento de anclaje es un elemento flex centrado.
  • Utilice los márgenes auto flexibles para desplazar los anclajes externos hacia la izquierda y hacia la derecha.