将导航栏无序列表与 flexbox 对齐

Question

我正在使用 flexbox 创建导航栏 - A Codepen here。我想要导航栏左侧的徽标和右侧的链接。

但是我无法锻炼如何使用 flex-end 达到良好效果。我在无序列表中的链接似乎不受 flexbox 的影响。有没有一种特殊的方法可以将 flexbox 绑定到导航栏？

我的HTML:

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
<nav>
    <!-- Primary Logo -->
    <div id="logo">
        <img src="http://www.shinetown.com.sg/shinetown/wp-content/uploads/2016/04/logo-dummy.png" alt="NewCircle">
    </div>
    <!-- Primary Navigation -->
    <div id="navigation">
        <ul>
            <li class="current"><a href="#">Home</a>
            <li><a href="#">Products</a>
            <li><a href="#">Pricing Plans</a>
            <li><a href="#">Help</a>
        </ul>
    </div>
</nav>

和我的手写笔代码：

nav-height = 100px
primary-color = #FF5B4E
primary-text-color = #444
secondary-border-color = #EEE

body {
  font-family: Raleway
}

nav, nav *
  display: flex
  align-items: center
  width: 100%

nav
  height: nav-height
  border-bottom: 5px solid secondary-border-color

  #logo
    width: 300px
    height: nav-height
    border-right: 1px solid secondary-border-color
    padding: 0 1em 0 1em

    img
      max-width: 100%


  #navigation
    height: 100%
    justify-content: flex-end

    ul
      list-style-type: none
      padding: 0
      height: 100%
      margin: 0

      li
        height: 100%
        a
          height: 100%
          transition: color 0.4s ease
          font-weight: bold
          font-size: 13px
          letter-spacing: 1px
          text-transform: uppercase
          text-align: center
          text-decoration: none
          color: primary-text-color
          padding: 0 18px 0 18px

        a:hover
          color: primary-color

      .current
        > a
          color: primary-color

Answer 1

flex-end不会解决，margin-left: auto会。

nav, nav *
  display: flex
  align-items: center

  #navigation
    height: 100%
    margin-left: auto

此外，在规则中你有 nav *，这将使所有 nav 的后代具有 100% 的宽度，并且 #navigation 不能对齐为满宽度。

从您的 nav, nav * 规则中删除 width: 100% 将解决这个问题。

Updated codepen

堆栈片段

body {
  font-family: Raleway;
}
nav,
nav * {
  display: flex;
  align-items: center;
}
nav {
  height: 100px;
  border-bottom: 5px solid #eee;
}
nav #logo {
  width: 300px;
  height: 100px;
  border-right: 1px solid #eee;
  padding: 0 1em 0 1em;
}
nav #logo img {
  max-width: 100%;
}
nav #navigation {
  height: 100%;
  margin-left: auto;
}
nav #navigation ul {
  list-style-type: none;
  padding: 0;
  height: 100%;
  margin: 0;
}
nav #navigation ul li {
  height: 100%;
}
nav #navigation ul li a {
  height: 100%;
  transition: color 0.4s ease;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: #444;
  padding: 0 18px 0 18px;
}
nav #navigation ul li a:hover {
  color: #ff5b4e;
}
nav #navigation ul .current > a {
  color: #ff5b4e;
}

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
<nav>
    <!-- Primary Logo -->
    <div id="logo">
        <img src="http://www.shinetown.com.sg/shinetown/wp-content/uploads/2016/04/logo-dummy.png" alt="NewCircle">
    </div>
    <!-- Primary Navigation -->
    <div id="navigation">
        <ul>
            <li class="current"><a href="#">Home</a>
            <li><a href="#">Products</a>
            <li><a href="#">Pricing Plans</a>
            <li><a href="#">Help</a>
        </ul>
    </div>
</nav>

注意，justify-content: flex-end 应该用在弹性容器上，而不是弹性项目上。当一个人想在一个弹性项目上设置它时，使用 align-self: flex-end.

在这种情况下，flex 具有行方向，因此 align-self 将不起作用，因为它应用于横轴，因此 margin-left: auto 可以解决问题。

将导航栏无序列表与 flexbox 对齐

Aligning navbar unordered list with flexbox

html

css

stylus

flexbox