Question

我是新手，我正在为练习制作我的作品集，并且我决定让它完全响应并尽可能地使用flexbox。我正在使用“移动优先”方法，因此我可以稍后修复桌面的任何丑陋。我的顶部导航栏在移动视图上分割我的按钮。例如，“关于我”按钮分为两行，“我”部分与“约”重叠。我希望它们全部适合一行，或两行分成两行，但整齐且没有重叠或切断文本。

这是我的代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {

}
.nav-container {
  display: flex;

}

nav {
  display: flex;
  font-family: "Lato", sans-serif;
  flex-wrap: wrap;
  position: fixed;

}

nav ul {
  display: flex;
  margin: 5px;
  padding: 10px;
  list-style-type: none;
  justify-content: space-around;
  width: 100%;
}

nav ul li {
  margin: 5px;
  padding: 5px;
}

.header-container {

}

header {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
top: 100px;
}

.headings {
  display: flex;
  flex-direction: column;
 justify-content: center;
 align-items: center;
 position: relative;
 text-align: center;
}

.cv-container {
  display: flex;
  align-self: flex-end;
  margin-left: 30px;
  position: relative;
  top: 30px;
  right: 30px;
  color: #000;
  border: 1px solid #000;
}

.cv-container a,
.nav-container a {
  text-decoration: none;
  color: #000;
  padding: 5px;
}

.cv-container a:hover,
.nav-container a:hover {
  background-color: #f442aa;
}

strong {
  font-style: bold;
}

header h1 {
  display: flex;
  align-self: center;
  font-family: "Lato", sans-serif;
  padding: 15px;
}

header h2 {
  display: flex;
  align-self: center;
  font-family: "Playfair Display", serif;
  padding: 15px;
}

header a {
  font-family: "Lato", sans-serif;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name='viewport'
      content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
  <title>My Name - Web Designer &amp; Developer</title>
  <link rel="stylesheet" href="styles.css"/>
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Playfair+Display:400,400i,700,700i" rel="stylesheet">
</head>
<body>
  <div class="nav-container">
    <nav>
      <ul>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Links</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>


    <header>
      <div class="headings">
      <p><h1>Virginia Balseiro</h1></p>
      <p><h2>Web Designer &amp; Developer</h2></p>
    </div>
      <div class="cv-container">
        <a href="#"><strong>DOWNLOAD CV</strong></a>
      </div>
      <div class="social-container">
        <a></a>
        <a></a>
        <a></a>
      </div>
    </header>

我在网上找到了一些“黑客”，但我真的想以正确的方式去做，并了解我在做什么。非常感谢你提前。

Answer 1

我建议你在“ul”标签上使用flex-wrap: wrap。

Flex包装允许将项目包装成多行。

如何阻止我的导航栏在移动设备中拆分按钮？

1 个答案: