Как сдвинуть второй внутренний элемент в правый край окна с помощью flexbox? Ну или с помощью каких-либо других инструментов css?

Question

[aleksandrkotov]

Сейчас логотип и переключатель языка в центре хедера, а нужно чтобы переключатель языка был далеко справа от центра, тоесть прижать к правому краю окна, при этом логотип остался по центру. Желательно с помощью flexbox.
Вот так нужно:


HTML:

<nav class="navbar">

     <a href=.... class="navbar-brand">.... </a>  // логотип
    
      <nav class="links>                    // второй внутренний элемент
           <span class="en nav-link"> 
                 <a href="/en" class="language link">язык</a>      
           </span>
           <span class="ru nav-link"> 
                 <a href="/ru" class="language link">язык</a>      
           </span>
       </nav>

</nav>

CSS:

.navbar {
    background: $red !important;
    justify-content: center;
}

.links {

}

Comments

[FrelFrloich]

Это ссылка друг, и ведёт она на сайт типо mySite.ru/en/ где /en/ версия сайта на других языка.
И выложи код в сеть, нихрена не понятно, сюда https://codepen.io/ или аналог.

[aleksandrkotov]

FrelFrloich, Не могу, этот код генерируется автоматически шаблонизатором одной cms. И там столько разных дополнительных классов и всяких обертывающих <div> <span> <nav> что еще труднее будет разобраться. Я немного подправил код, чтобы было понятнее.

[FrelFrloich]

aleksandrkotov, ну ссылочку скинь, реально же не понятно чего там у тебя.

[aleksandrkotov]

FrelFrloich, На что я могу ссылку сбросить?:) Сайт лежит локально на компьютере. Что же тут неясно?) Думаю для тех, кто разбирается в flexbox, в отличие от меня, будет легко подсказать какие свойства прописать для navbar и links.

[FrelFrloich]

aleksandrkotov, ааа блин, вам надо просто поменять местам?) я думал переключить по клику, тогда вам.

.link {
 order: -1;
}

или

.navbar {
  display: flex;
  flex-direction: row-reverse;
}

В общем я подумал, что вам надо кликнуть на ссылку и переключить ей анимацию язака, после это вас бы перенаправило на ваш поддомен с другим языком:D Я скоро со своим js свехнусь.

[aleksandrkotov]

FrelFrloich, Извиняюсь, я наверное неправильно сформулировал вопрос, нужно чтобы переключатель языка был далеко справа от центра, тоесть прижать к правому краю окна, при этом логотип остался по центру.

Вот так:

[FrelFrloich]

aleksandrkotov, аа ну тогда

.navbar {
  display: flex;
}
.link {
margin-left: auto;
}

ну или обверните две ссылки в дополнительный див и назовём его контейр

.navbar {
  display: flex;
 justify-content: flex-end;
}
.container {
display:flex;
justify-content: space-between;
width: 50%
}

ещё можно

.navbar {
  display: flex;
}

navbar-brand,
.link {
margin-left: auto;
}

Выбирайте в общем.

[aleksandrkotov]

FrelFrloich, Спасибо, отчасти это помогло.

Answer 1

[Ankhena]

Желательно с помощью flexbox.

С помощью флексбокс это делать неудобно. Придется добавлять псевдо с той же шириной, как у правого блока.

Ваши друзья в данном случае гриды (2 способа) или абсолюты (гриды лучше).
https://jsfiddle.net/056uLsa1/
https://jsfiddle.net/179wtyrk/

https://codepen.io/AnnaSummer/pen/ZEjwKea (тут оба варианта)

Comments

[aleksandrkotov]

К сожалению у меня гриды не сработали, сложная у меня структура и разметки и стилей которая созадается на лету шаблонизатором и самой cms, може что-то я упустил а может какой-то другой код блокирует, ибо логотип стал размером в несколько px а блок с переключателем половину хедера занимает и не прицепился к правому краю, наверное мне нужно искать какой-то вариант попроще, может float попробую.

[Ankhena]

aleksandrkotov,

ибо логотип стал размером в несколько px

Так вы ему размер задайте или замените на max-content.
Я же не знаю как он у вас там сделан.

наверное мне нужно искать какой-то вариант попроще, может float попробую.

Чтобы вам помочь, нужно чтобы вы сделали пример с вашим кодом в песочнице на jsfiddle.net или аналоге.

[kryamk]

Второй вариант отпад, благодарствую! И чего я раньше даже не догадывался что можно расположить ячейки друг на друга. Гридный абсолют, супер! Пошел переделывать у себя на сайте )

[Ankhena]

kryamk, есть игра по гридам grid garden (так и гуглится), может ещё что-нибудь принесет в вашу жизнь ;)

[godsplan]

Ankhena обновите под кодпен плз)Иногда чекаю этот вопрос, способ с гридами постоянно забываю

[Ankhena]

godsplane, +

Answer 2

[Сергей delphinpro]

Недавно предлагал вот такое решение. https://jsfiddle.net/DelphinPRO/qghvzfxm/

Comments

[aleksandrkotov]

Извиняюсь, я наверное неправильно сформулировал вопрос, нужно чтобы переключатель языка был далеко справа от центра, тоесть прижать к правому краю окна, при этом логотип остался по центру.

Вот так:

[Сергей delphinpro]

aleksandrkotov, я именно это и показал. Синий блок – ваш логотип, красный – переключатель языка. Только в примере слева, а вам нужно переместить его вправо. Думаю, справитесь.