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;
}

因此，基本上，中间的徽标永远不会完美居中。不管我做什么。我当然可以添加一些额外的边距来使其居中，但这只是稍后添加的更多问题。

由于单词的长度不同，也将右侧具有className'right'的项目也推到右侧。

我想知道flexbox是否是像这样的简单导航栏的方式吗？

在React中的div中包裹它的事实是否也会引起混乱？（尽管它没有特定的类）。

就像我在网上找到的所有东西一样，它们要么是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一个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>

创建一个带徽标徽标的Flexbox导航栏，并在左侧和右侧列出项目

2 个答案: