Flexbox: центрированный элемент с элементами пространства вокруг с обеих сторон

Я использую flexbox для настройки меню, состоящего из семи элементов <li> с различной шириной. Я бы хотел, чтобы мой средний (4-й в исходном порядке) элемент <li> всегда был горизонтально центрирован как своего рода якорь, причем элементы 1-3rd <li> занимали пространство слева от центрированного <li> и 5-й, занимая пространство справа.

Я пробовал space-around, space-between в родительском контейнере flex, а также align-self: center в элементе <li>, который я пытаюсь центрировать, но пока не повезло. Любая помощь от кого-то, знающего в flexbox, будет оценена по достоинству.

jsfiddle

Ответ 1

Вам нужно изменить структуру nav и начать с 3 контейнеров слева, в центре и вправо. DEMO

HTML

слева и справа будет содержать несколько ссылок, а центр - это ссылка.

<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 примет display:flex и justify-content:space-between, поэтому будет левым и правым.

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

Чтобы создать зазор по краям справа и слева к центру, мы просто добавляем псевдоэлемент (или пустой элемент).

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 */
}

слева и справа может принимать значение flex выше, чем 1, чтобы избежать слишком большого расширения центра.

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

Давайте нарисуем наши боксы ссылок:

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

DEMO

Ответ 2

Я думаю, что способ сделать это состоит в том, чтобы разделить элементы на три разных элемента ul, а затем использовать свойство flex, чтобы установить, насколько велики три столбца.

У внешних столбцов есть три элемента, поэтому они получают flex:3. В центрированном столбце имеется только один элемент, поэтому он получает flex:1. Таким образом, при изменении размера flexbox будет использоваться 3 гибких блока для больших столбцов и 1 гибкий блок для центрированного столбца. Если вам нужно использовать другое количество элементов в любом столбце, просто измените элемент flex, чтобы отобразить, сколько элементов внутри него.

Рабочая скрипка: jsfiddle