如何在 flex box 中从底部定位元素，而不低于底部答案

【问题标题】：How to position elements from the base in a flex box, without going below the base如何在 flex box 中从底部定位元素，而不低于底部
【发布时间】：2019-06-07 12:00:15
【问题描述】：

我正在尝试将元素放置在显示为 flexbox 的标题中，以便左侧的图像（徽标）与右侧导航的底部垂直对齐。似乎很容易，但是我还有一个需要定位在导航附近的搜索按钮。当我这样做时，搜索按钮似乎将导航推到了 flexbox 基线下方，并且似乎没有多少填充或负边距可以解决它。

logo 包含在一个占屏幕宽度 40% 的 div 中，而 nav 包含在一个占 60% 的 div 中。我已经截取了一个屏幕截图，为了说明我已经向 logos 容器 div 添加了一个红色背景。

代码如下：

<body>

    <header class="pageHead">
        <div class="logoBox">
            <img class="logo" src="images/Logo.png">
        </div>
        <div class="headRight">

            <nav id="mainNav">
                <i class="fas fa-search searchIcon"></i>
                <li class="active">Products</li>
                <li>Support</li>
                <li>About</li>
                <li>Contact</li>
                <li class="orange">Partners</li>
            </nav>
        </div>
    </header>

</body>



body {
    background-color:  #f7f7f7;
}
header.pageHead {
    display: flex;
    align-items: baseline;
    padding: 30px 10%;
    color: #555;
}
.logoBox{
    width: 40%;
}
.headRight {
    width: 60%;
}
nav#mainNav {text-align: right;}
nav#mainNav li {
    display: inline-block;
    padding: 0 0 0 2em;
    font-size: 1.2em;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 0.1em;
} 
.searchIcon {
    width: 100%;
    text-align: right;
}

任何帮助将不胜感激。谢谢。

【问题讨论】：

你想要导航栏旁边还是上面的搜索按钮？

标签： html css flexbox baseline

【解决方案1】：

你可以试试这个。

body {
                background-color:  #f7f7f7;
            }
            header.pageHead {
                display: flex;
                align-items: center;
                padding: 30px 10%;
                color: #555;
            }
            .logoBox{
                width: 20%;
                background: red;
            }
            .headRight {
                width: 80%;
            }
            nav#mainNav {text-align: right;display: flex;}
            nav#mainNav li {
                display: inline-block;
                padding: 0 0 0 2em;
                font-size: 1.2em;
                font-family: 'Open Sans', sans-serif;
                letter-spacing: 0.1em;
            } 
            .searchIcon {
                width: 100%;
                text-align: right;
            }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        
    </head>
    <body>

      <header class="pageHead">
          <div class="logoBox">
              <img class="logo" src="images/Logo.png">
          </div>
          <div class="headRight">

              <nav id="mainNav">
                  <i class="fa fa-search searchIcon"></i>
                  <li class="active">Products</li>
                  <li>Support</li>
                  <li>About</li>
                  <li>Contact</li>
                  <li class="orange">Partners</li>
              </nav>
          </div>
      </header>

  </body>
</html>

【讨论】：

您的意思是在#mainNav 中添加“display: flex”？不起作用，实际上具有相反的效果并将导航推到页面下方。