Свойство обратной строки строки Flexbox не переворачивает строку? - PullRequest
Новая
       10

Свойство обратной строки строки Flexbox не переворачивает строку?

0 голосов
/ 07 июня 2018

Я работаю над Navbar для моего сайта, и я заметил, что если бы у меня были ссылки справа, используя float: right, они бы изменили порядок.Я думал, что смогу вернуть их обратно, используя Flexbox flex-direction: reverse-row.Это, похоже, не работает?

Вот код, который должен быть ответственным за восстановление этого эффекта: 

.headerItem {
  display: block;
  padding-left: 7px;
  padding-right: 7px;
  float: right;
  display: flex;
  flex-direction: row-reverse;
}

Любые подсказки / помощь?

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

Хорошо, так что я нашел ответ.@jmag предоставил некоторую полезную информацию, а также помог дальнейший поиск в Google.Новая панель навигации выглядит следующим образом: 

<div id="header">
    <span id="headerLogo">XaafCode</span>

    <div id="navbar">
      <a href="/index.html" class="headerItem" id="active">Home</a>
      <a href="#" class="headerItem">Portfolio</a>
      <a href="/contact.html" class="headerItem">Contact me</a>
  </div>
</div>

В CSS у меня есть это сейчас, что легко исправить: 

#navbar, #header { justify-content: space-between; }
0 голосов
/ 07 июня 2018

свойство float не является частью flex.Это помешает ему делать то, что он должен, потому что вы заставляете его плавать вправо.У Flex есть свой способ сделать это.его называют justify-content - flex-start, flex-end, center, space -ween и space-around.Попробуйте, какой из них работает для вас.

...