html - Flexbox 重叠

问题描述

我正在尝试使用 flexbox 构建导航栏，但在较小的屏幕上内容重叠，我知道媒体查询可以避免这种情况，但我试图在不使用这些媒体查询的情况下找到解决方案。

body {
  margin: 0;
  padding: 0;
}


/* start of nav */

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1em;
}

.search-box {
  display: flex;
  align-items: stretch;
  border-radius: 0.5em;
  height: 1.75em;
  width: 30%;
}

.search-box input {
  border: none;
  background: transparent;
  outline: none;
  border: 1px solid #00b8e6;
  border-right: none;
  border-radius: 0.5em 0 0 0.5em;
  padding: 0.25em;
  flex: 1;
}

.fa-search {
  display: flex;
  align-items: center;
  cursor: pointer;
  border: 1px solid #00b8e6;
  border-left: none;
  border-radius: 0 0.5em 0.5em 0;
  padding: 0.25em 0.2em;
  color: #00ccff;
}

.fa-search:hover {
  background: #ccf5ff;
}

.nav-login-btns {
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  width: 17%;
  font-size: 1.2em;
}

.nav-login-btns a {
  text-decoration: none;
}


/* end of nav */

<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://kit.fontawesome.com/8370b7a799.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="styles.css" />
  <title>Ecommerce</title>
</head>

<body>
  <nav class="nav">
    <i class="fas fa-bars"></i>
    <img src="/img/logo.png" alt="" />
    <div class="search-box">
      <input type="text" />
      <i class="fas fa-search"></i>
    </div>
    <div class="nav-login-btns">
      <a href="#">Sign In</a>
      <a href="#">Login</a>
    </div>
    <i class="fas fa-shopping-cart"></i>
  </nav>
</body>

</html>

我怎样才能避免这种情况？我期待像一个新的行可能？我也尝试了 flex-wrap: wrap 但仍然没有结果。它与最小宽度有关吗？

标签： htmlcss

html - Flexbox 重叠

问题描述

解决方案

推荐阅读