Question

所以我最近开始在Flexbox中轻拍，我正在尝试创建一个侧面有垂直导航区域的页面。我的问题是我的内容出现在导航区域下方。不是它的一面。我想知道如何使用Flex框让我的内容显示在导航旁边，就像在此页面中一样：

到目前为止，这是我的页面：

https://jorgeg1105.github.io/JG-Photography/

感谢您的帮助！

＆＃13;

body {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}


/*--------------Side Navigation Styles--------------------*/

#sidenav {
  background-color: black;
  color: white;
  width: 60px;
  height: 100%;
  text-align: center;
  position: fixed;
  border-right: 6px solid #766E6B;
  display: flex;
  flex-direction: column;
}

#sidenav ul {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

#sidenav li:nth-child(1) {
  margin-bottom: 120px;
}

#sidenav li:nth-child(6) {
  margin-top: 195px;
}

#sidenav a {
  display: block;
  padding: 20px;
}

#sidenav a:visited {
  color: white;
}

#sidenav a:hover {
  color: black;
  background-color: white;
}


/*-------------Header Styles-------------------------------*/

header {}


/*------------------Main Navigation-----------------------*/

#mainnav {}


/*--------------------Container Area------------------------*/

#container {}


/*-----------------------Footer Styles---------------------*/

footer {}


/*-------------------Flexbox-----------------------*/

.col {
  flex: 1;
}

.row {
  display: flex;
}

＆＃13;

<nav id="sidenav" class="row">
  <ul class>
    <li><a href="index.html"><i class="fa fa-home" aria-hidden="true"></i></a></li>
    <li><a href="https://www.facebook.com" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
    <li><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
    <li><a href="https://www.pinterest.com/" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-arrow-up" aria-hidden="true"></i></a></li>
  </ul>
</nav>
<header>
  <div class="row">
    <div class="col">
      <ul>
        <li>
          <div>
            <a href="#">
              <p>Gallery</p>
              <span>Our Work</span>
            </a>
          </div>
        </li>
        <li>
          <div>
            <a href="#">
              <p>About</p>
              <span>J&amp;G Photography</span>
            </a>
          </div>
        </li>
        <li>
          <div>
            <a href="#">
              <p>Questions</p>
              <span>Facts</span>
            </a>
          </div>
        </li>
      </ul>
    </div>
    <div class="col">
      <h1>J&amp;G Photography</h1>
      <h3><em>"Explore. Create. Inspire."</em></h3>
    </div>
    <div class="col">
      <ul>
        <li>
          <div>
            <a href="#">
              <p>Rates</p>
              <span>Your Investment</span>
            </a>
          </div>
        </li>
        <li>
          <div>
            <a href="#">
              <p>Contact</p>
              <span>Get In Touch</span>
            </a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</header>

<!--Font Awesome-->
<script src="https://use.fontawesome.com/d579f311e9.js"></script>

＆＃13;

Answer 1

我会body为flex父级，从导航中移除fixed定位，然后在导航中引入一个兄弟，将填充页面的其余部分，设置为{ {1}}（或简称flex-grow: 1）并设置flex: 1 0 0，以便内容区域垂直滚动。

我还会稍微重新导航一下。将其设置为overflow-y: scroll，使图标位于导航中间的中心位置，然后使用justify-content: center auto值作为顶部/底部链接将其推送到导航边缘。还为margin添加了min-height以便所有图标都可见，并#sidenav ul以防万一它溢出，以便您可以在超短屏幕上滚动该菜单。

overflow-y: auto

body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  overflow: hidden;
}

ul {
  list-style-type: none;
}

/*--------------Side Navigation Styles--------------------*/
#sidenav {
  background-color: black;
  color: white;
  width: 60px;
  text-align: center;
  border-right: 6px solid #766E6B;
  overflow-y: auto;
  height: 100%;
}

#sidenav ul {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  justify-content: center;
  min-height: 400px;
}

#sidenav ul li:first-child {
  margin-bottom: auto;
}
#sidenav ul li:last-child {
  margin-top: auto;
}

#sidenav a {
  display: block;
  padding: 20px;
}

#sidenav a:visited {
  color: white;
}

#sidenav a:hover {
  color: black;
  background-color: white;
}

/*-------------Header Styles-------------------------------*/
header {
}

/*------------------Main Navigation-----------------------*/

#mainnav {
}

/*--------------------Container Area------------------------*/

#container {
  flex: 1 0 0;
  overflow-y: auto;
}

/*-----------------------Footer Styles---------------------*/

footer {
}

/*-------------------Flexbox-----------------------*/
.col {
  flex: 1;
}

.row {
  display: flex;
}

柔性箱垂直导航问题

1 个答案: