Создание панели навигации flexbox с lo go в центре и списком элементов слева и справа

Question

Я уже давно бьюсь головой об этом. Я думал, что это будет просто, но ... это не так.

Мой мыслительный процесс и код.

HTML

      <nav className="navbar">
        <div className="left">
          <ul>
            <li>HOME</li>
            <li>ARTISTS</li>
            <li>MEDIA</li>
          </ul>
        </div>
        <div className="center">
          <img src={logo} alt="" />
        </div>
        <div className="right">
          <ul>
            <li>MERCHANDISE</li>
            <li>FAMILY</li>
            <li>CONTACT</li>
          </ul>
        </div>
      </nav>
    </div>

CSS ( Sass):

$black: #000;
$white: #fff;

html,
body {
  background-color: $black !important;
  color: $white;
  font-family: Helvetica;
  font-size: 18px;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

li {
  display: inline;
  padding: 5px;
}

.navbar {
  display: flex;
  text-align: center;
  justify-content: space-between;
}

.left {
  display: flex;
  width: 200px;
}

.center {
  display: flex;
  justify-content: flex-start;
  width: 120px;
}

.right {
  display: flex;
}

.image-container {
  display: flex;
  justify-content: center;
}

Так что в основном lo go в середине никогда не бывает идеально отцентрированным. Неважно что я делаю. Конечно, я могу добавить дополнительное поле для центрирования, но это только добавит еще несколько проблем позже.

Элементы справа с className 'right' также просто сдвинуты вправо, потому что длина слов различна.

Мне интересно, является ли flexbox способом go для простого navbar, как это или нет?

Не мешает ли тот факт, что это завернуто в div в React? (Хотя у него нет определенного c класса).

Похоже, все, что я нахожу в Интернете, - это либо Bootstrap решения, либо совершенно другой способ, который, как только вы выбираете другой пункт меню, портит со всей навигационной панелью.

Заранее спасибо.

Answer 1

Вы на правильном пути!

Попробуйте:

    nav {
        display: flex;
        width: 100%;
        text-align: center;
    }
    .center, .left, .right {
        flex: 1;
    }
    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    nav ul li {
        display: inline;
        padding: 30px;
    }

Я дал nav a width:100%;, поэтому flex:1 может занять столько места, сколько ему позволено ,

Answer 2

На самом деле это действительно просто, пожалуйста, следуйте этому:

const App = () => {

 return ( 
  <div className="App">
    <nav className="navbar">
      <div className="left">
        <ul className="list">
          <li>HOME</li>
          <li>ARTISTS</li>
          <li>MEDIA</li>
        </ul>
      </div>
      <div className="center">
        <img src="https://dummyimage.com/50x50/000/fff" alt="" />
      </div>
      <div className="right">
        <ul className="list">
          <li>MERCHANDISE</li>
          <li>FAMILY</li>
          <li>CONTACT</li>
        </ul>
      </div>
    </nav>
   </div>
 )
}

ReactDOM.render( <App /> , document.getElementById('root'))

.navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.list {
  display: flex;
  padding: 0;
  list-style: none;
  margin: .25rem;
}

.list li {
  padding: .25rem
}

/* make it responsive */
@media (max-width: 575.98px) {
 .navbar {
   flex-direction: column;
 }
 .list {
   flex-direction: column;
   text-align: center;
  }
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>