una - centrar verticalmente css

Flexbox: elemento centrado con elementos de espacio alrededor de cada lado.

Question

Estoy usando flexbox para configurar un menú que consta de siete elementos <li> con varios anchos. Me gustaría que mi elemento medio (cuarto en el orden de la fuente) <li> esté siempre centrado horizontalmente como una especie de ancla, con los elementos 1-3 <li> que ocupan el espacio a la izquierda del <li> centrado y El quinto-séptimo ocupando el espacio a la derecha.

He intentado space-around , space-between en el contenedor de elementos primarios, así como align-self: center en el elemento <li> que estoy intentando centrar, pero hasta ahora no hay suerte. Cualquier ayuda de alguien con conocimientos en flexbox sería apreciada.

jsfiddle

Answer 1

Creo que la forma de hacer esto es dividir los elementos en tres elementos ul diferentes, y luego usar la propiedad flex para establecer el tamaño de las tres columnas.

Las columnas exteriores tienen tres elementos, de modo que se flex:3 . La columna centrada solo tiene un elemento, por lo que se flex:1 . De esa manera, cuando cambie el tamaño, flexbox utilizará 3 unidades de flexión para las columnas más grandes y 1 unidad de flexión para la columna centrada. Si necesita usar un número diferente de elementos en cualquiera de las columnas, simplemente cambie la unidad flex para reflejar cuántos elementos hay dentro de ella.

jsfiddle trabajo: jsfiddle

Answer 2

Necesitas modificar tu estructura de nav y comenzar desde 3 contenedores a la izquierda , centro y derecha . DEMO

HTML

izquierda y derecha mantendrán algunos enlaces, centro es un enlace.

<nav>
<span>
    <a href="#">aaa </a>
    <a href="#">aa </a>
    <a href="#">a </a>
    </span>
    <a href="#"> center </a>
    <span>
      <a href="#">bbbb </a>
      <a href="#">bbbbb </a>
      <a href="#">bbbbbb </a>
    </span>
</nav>

CSS

nav tomará la display:flex y justify-content:space-between , así lo hará a la izquierda y a la derecha .

nav, nav span {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;/* so they do not overlap each other if space too short */
}

Para generar un espacio en los bordes de derecha e izquierda hacia el centro, solo agregamos un pseudo elemento (o un elemento vacío) .

span:first-of-type:after,
span:last-of-type:before{
    content:'''';
    display:inline-block;/* enough , no width needed , it will still generate a space between */
}

La izquierda y la derecha pueden tomar un valor de flex superior a 1 , para evitar que el centro se expanda demasiado.

nav > span {
    flex:2; /* 2 is minimum but plenty enough here  */
}

dibujemos nuestros cuadros de enlaces:

a {
    padding:0 0.25em;
    border:solid;
}

DEMO