Agregar línea divisoria entre elementos flexibles con distribución de espacio igual

Tengo una lista con diferentes elementos que tienen anchos automáticos (no se puede dar un ancho fijo en mi caso). Uso justify-content: space-between porque mi primer elemento debe comenzar al principio del contenedor y mi último elemento al final.

Todo lo anterior funciona bien, pero cada vez que trato de agregar una línea entre estos elementos de la lista, los problemas comienzan a aparecer. No tengo forma de determinar cuántos px o% tengo para posicionar estas líneas. ¿Hay alguna forma de posicionar “dinámicamente” las líneas entre los diferentes elementos de la lista o no?

El html que estamos utilizando no es editable, ya que es generado por el CMS que estamos usando.

Esto es lo que tengo:

Esto es lo que tengo

Esto es lo que trato de lograr

Esto es lo que me gustaría lograr

Aquí está el código que tengo actualmente

 html { box-sizing: border-box; } .Container { max-width: 70%; margin-right: auto; margin-left: auto; background: blue; padding-top: 20px; padding-bottom: 20px; } .Flex { display: flex; flex-flow: row wrap; justify-content: space-between; list-style: none; margin: 0; padding: 0; } .Flex-item { background: red; position: relative; } .Flex-item:after { content: ""; position: absolute; background: white; width: 1px; height: 40px; top: 50%; transform: translateY(-50%); } 
 
  • Lorem
  • consectetur
  • vestibulum
  • nec
  • condimentum

Estoy usando esta solución en un proyecto en el que estoy trabajando.

Establece justify-content: space-between; en el contenedor flexible y flex: 1 1 auto; en los niños con un borde izquierdo en todos los niños excepto primero.

Modifiqué tu CSS de ejemplo para que puedas echarle un vistazo. No estaba seguro de si tendrías color de fondo en los niños, así que utilicé la altura de línea para obtener bordes más grandes.

 html { box-sizing: border-box; } .Container { max-width: 70%; margin-right: auto; margin-left: auto; background: blue; padding-top: 20px; padding-bottom: 20px; } .Flex { display: flex; flex-flow: row wrap; justify-content: space-between; list-style: none; margin: 0; padding: 0; } .Flex-item { flex: 1 1 auto; background: red; position: relative; text-align: center; line-height: 40px; } .Flex-item + .Flex-item { border-left: solid 1px white; } 
 
  • Lorem
  • consectetur
  • vestibulum
  • nec
  • condimentum

Puede hacer que funcione utilizando un flexbox es nested – Entiendo que no puede cambiar el marcado, pero al menos tiene que envolver el contenido del li en un span como el que tengo aquí:

  1. Haga que .flex-item también sea un flexbox con el texto en un span (esto tendría el fondo rojo ahora) y el separador como un elemento :after

  2. Aplique flex-grow y flex-shrink a 1 y flex-basis a auto para el Flex-item .

  3. El flex: 0 al último Flex-item y margin-auto al :after también contribuye al efecto.

Una demostración puede explicarlo mejor, ver a continuación:

 html { box-sizing: border-box; } .Container { max-width: 70%; margin-right: auto; margin-left: auto; background: blue; padding-top: 20px; padding-bottom: 20px; } .Flex { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; } .Flex-item { display: flex; justify-content: space-between; align-items: center; flex: 1 1 auto; } .Flex-item span { background: red; } .Flex-item:not(:last-child):after { content: ""; border: 1px solid white; height: 40px; margin: auto; } .Flex-item:last-child { flex: 0; } 
 
  • Lorem
  • consectetur
  • vestibulum
  • nec
  • condimentum

En lugar de :after intentar usar un conjunto de

  •  .Container { max-width: 70%; margin: 0 auto; background: blue; } .Flex { display: flex; justify-content: space-between; list-style: none; padding: 20px 0; margin:0; } .Flex-item { background: red; } .separator { background: white; width: 1px; } 
     
    • Lorem
    • consectetur
    • vestibulum
    • nec
    • condimentum

    Creo que la única forma de lograr esto con flexbox es envolver el texto en un nuevo elemento, como ha hecho @Kukkuz en otra respuesta .

    Sin ese envoltorio adicional, aún puede obtener los divisores espaciados equitativamente, pero el fondo rojo no se limita a la longitud del texto.

    A continuación se muestra un ejemplo con:

    • Sin cambios al HTML.
    • No hay necesidad de pseudo elementos.
    • Sin necesidad de posicionamiento absoluto.

    Si no es necesario un color de fondo para el texto, elimínelo y esto debería ser todo lo que necesita.

     .Flex { display: flex; list-style: none; margin: 0; padding: 0; } .Flex-item { flex: 1 1 auto; background: red; } .Flex-item { text-align: center; } .Flex-item:first-child { text-align: left; } .Flex-item:last-child { text-align: right; } .Flex-item + .Flex-item { border-left: 1px solid white; } .Container { max-width: 70%; margin-right: auto; margin-left: auto; background: blue; padding-top: 20px; padding-bottom: 20px; } 
     
    • Lorem
    • consectetur
    • vestibulum
    • nec
    • condimentum

    Prueba esto

     html { box-sizing: border-box; } .Container { max-width: 90%; margin-right: auto; margin-left: auto; background: blue; padding-top: 11px; padding-bottom: 50px; } .Flex { list-style: none; margin: 0; padding: 0; position: relative; left: 50%; transform: translateX(-50%); float: left; } .Flex-item { position: relative; float: left; padding: 5px 10px; border-right:1px solid #fff; } .Flex-item:last-child{border-right:none;} .Flex-item >div{ margin:0 5px; background:red; padding:5px; } 
     
    • Lorem
    • consectetur
    • vestibulum
    • nec
    • condimentum

    si imbrica flex , puede obtener algo parecido a lo que intenta hacer sin ningún margen adicional.

    Implica selectores de pseudos, order y css3 ( flex lado fino).

    http://codepen.io/gc-nomade/pen/BpzYWP

     body { margin:0; } .Flex, .Flex-item { display:flex; padding:0.5em 0; margin:0; } .Flex-item { flex:1;/*spray them evenly*/ } .Flex-item:before, .Flex-item:after {/* add pseudos to fill extra space */ content:''; flex:1;/* thats where it takes room not use by the text */ margin:-1em 0;/* grow them taller */ border-right:solid 1px white; } .Flex-item:first-child:before { order:2;/* put both pseudo after text*/ flex:.5;/* shrink that one can be .75 to .25 */ border:none; /* remove the border useless for the show */ } .Flex-item:last-child:after { order:-1;/* put both pseudos before text */ flex:0.5;/* shrink that one can be .75 to .25 */ } .Flex-item:first-child + .Flex-item:before , .Flex-item:nth-last-child(1):after{ border:none; /* remove the border useless for the show */ } body, :after, :before { background:tomato;/* pseudo will hide li background */ } li { background:turquoise; } /* give some space around the text */ .Flex-item:first-child { padding-left:1em; } .Flex-item:last-child { padding-right:1em; } .Flex-item:before { border:none;/* we do not need those after all */ margin-right:1em; } .Flex-item:after { margin-left:1em; } .Flex-item:first-child:before { margin:-1em 0; }.Flex-item:last-child:after { margin:-1em 0; } 
     
    • Lorem
    • consectetur
    • vestibulum
    • nec
    • condimentum