将拉伸时的项目与父div的中心对齐

时间：2018-08-22 18:44:36

标签： javascript html css css3 flexbox

我试图创建一个可以在手机屏幕上完全展开的菜单。对于父容器，我使用带有flex-direction列的flexbox并在全屏高度上拉伸项目。

$(document).ready(() => {
  $("#btnMenu").click(() => {
    toggleMenu();
  });

  $(".navbarLink").click(() => {
    if ($("#navbarItems").hasClass("activeNavbar")) {
      toggleMenu();
    }
  });
});

function toggleMenu() {
  $("#navbarItems").toggleClass("activeNavbar");
  toggleMenuBtn();
}

function toggleMenuBtn() {
  $("#btnMenu").toggleClass("activeMenuBtn");
}
body {
  margin: 0;
}

.link {
  text-decoration: none;
}

#navbar {
  height: 60px;
  top: 0;
  padding-left: 200px;
  padding-right: 200px;
  position: sticky;
  background: #1e222a;
}

#navbarItems {
  height: 100%;
  display: flex;
  align-items: center;
}

#logoLink {
  display: flex;
  align-items: center;
}

#navbarItems .navbarItem:not(:first-child) {
  margin-left: 30px;
}

.navbarItem {
  background: #1e222a;
}

.navbarLink {
  color: #ffffff;
}

.navbarLink:hover {
  color: #3abcf3;
}

#btnMenuContainer {
  height: 100%;
  display: none;
}

#btnMenu {
  cursor: pointer;
}

.menuBtnBar {
  width: 35px;
  height: 5px;
  margin: 6px 0;
  background-color: #ffffff;
  transition: 0.4s;
}

.activeMenuBtn #barTop {
  transform: rotate(-45deg) translate(-9px, 6px);
}

.activeMenuBtn #barCenter {
  opacity: 0;
}

.activeMenuBtn #barBottom {
  transform: rotate(45deg) translate(-8px, -8px);
}

@media(max-width: 1200px) {
  #navbar {
    padding-left: 150px;
    padding-right: 150px;
  }
}

@media(max-width: 1100px) {
  #navbar {
    padding-left: 0;
    padding-right: 0;
  }
  #btnMenuContainer {
    display: flex;
    align-items: center;
  }
  #btnMenu {
    margin-left: 20px;
  }
  #navbarItems {
    margin-left: 0;
    display: none;
  }
  #navbarItems.activeNavbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100vh;
  }
  #logoLink {
    display: inline-block;
  }
  .navbarItem {
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  #navbarItems .navbarItem:not(:first-child) {
    margin-left: 0;
  }
  #navbarItems .navbarItem:not(:last-child) {
    border-bottom: 1px solid #676767;
  }
  .navbarLink {
    width: 100%;
    height: 100%;
    display: inline-block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
  <div id="btnMenuContainer">
    <div id="btnMenu">
      <div id="barTop" class="menuBtnBar"></div>
      <div id="barCenter" class="menuBtnBar"></div>
      <div id="barBottom" class="menuBtnBar"></div>
    </div>
  </div>

  <div id="navbarItems">
    <div class="navbarItem">
      <a id="logoLink" class="link navbarLink" href="#">
        <img class="img" src="https://cdn4.iconfinder.com/data/icons/32x32-free-design-icons/32/Ok.png">
      </a>
    </div>

    <div class="navbarItem">
      <a class="link navbarLink" href="#">
                            Link 2
                        </a>
    </div>

    <div class="navbarItem">
      <a class="link navbarLink" href="#">
                            Link 3
                        </a>
    </div>
  </div>
</div>

使用align-items: stretch;时，如何将链接（和徽标）放回中心？

我的第二个问题是，height: 100vh;可以用来代替什么？我想保持动态，所以也许有比使用常数更好的方法了？

3 个答案:

答案 0 :(得分：2)

工作正常。检查代码段和提琴，以进一步澄清。

否，所有链接都居中对齐，并且菜单高度占据了可用空间的全部高度，并且不再滚动。

我的建议是使用100vh作为高度，因为100vh是动态值，因此它比应用静态值更好。

https://jsfiddle.net/Sampath_Madhuranga/4uLb6rsw/7/ 

$(document).ready(() => {
  $("#btnMenu").click(() => {
    toggleMenu();
  });

  $(".navbarLink").click(() => {
    if ($("#navbarItems").hasClass("activeNavbar")) {
      toggleMenu();
    }
  });
});

function toggleMenu() {
  $("#navbarItems").toggleClass("activeNavbar");
  toggleMenuBtn();
}

function toggleMenuBtn() {
  $("#btnMenu").toggleClass("activeMenuBtn");
}
body {
  margin: 0;
}

.link {
  text-decoration: none;
}

#navbar {
  height: 60px;
  top: 0;
  padding-left: 200px;
  padding-right: 200px;
  position: sticky;
  background: #1e222a;
}

#navbarItems {
  height: 100%;
  display: flex;
  align-items: center;
}

#logoLink {
  display: flex;
  align-items: center;
}

#navbarItems .navbarItem:not(:first-child) {
  margin-left: 30px;
}

.navbarItem {
  background: #1e222a;
}

.navbarLink {
  color: #ffffff;
}

.navbarLink:hover {
  color: #3abcf3;
}

#btnMenuContainer {
  height: 100%;
  display: none;
}

#btnMenu {
  cursor: pointer;
}

.menuBtnBar {
  width: 35px;
  height: 5px;
  margin: 6px 0;
  background-color: #ffffff;
  transition: 0.4s;
}

.activeMenuBtn #barTop {
  transform: rotate(-45deg) translate(-9px, 6px);
}

.activeMenuBtn #barCenter {
  opacity: 0;
}

.activeMenuBtn #barBottom {
  transform: rotate(45deg) translate(-8px, -8px);
}

@media(max-width: 1200px) {
  #navbar {
    padding-left: 150px;
    padding-right: 150px;
  }
}

@media(max-width: 1100px) {
  #navbar {
    padding-left: 0;
    padding-right: 0;
  }
  #btnMenuContainer {
    display: flex;
    align-items: center;
  }
  #btnMenu {
    margin-left: 20px;
  }
  #navbarItems {
    margin-left: 0;
    display: none;
  }
  #navbarItems.activeNavbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: calc( 100vh - 60px);
  }
  #logoLink {
        display: flex;
    justify-content: center;
  }
  .navbarItem {
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  #navbarItems .navbarItem:not(:first-child) {
    margin-left: 0;
  }
  #navbarItems .navbarItem:not(:last-child) {
    border-bottom: 1px solid #676767;
  }
  .navbarLink {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
  <div id="btnMenuContainer">
    <div id="btnMenu">
      <div id="barTop" class="menuBtnBar"></div>
      <div id="barCenter" class="menuBtnBar"></div>
      <div id="barBottom" class="menuBtnBar"></div>
    </div>
  </div>

  <div id="navbarItems">
    <div class="navbarItem">
      <a id="logoLink" class="link navbarLink" href="#">
        <img class="img" src="https://cdn4.iconfinder.com/data/icons/32x32-free-design-icons/32/Ok.png">
      </a>
    </div>

    <div class="navbarItem">
      <a class="link navbarLink" href="#">
                            Link 2
                        </a>
    </div>

    <div class="navbarItem">
      <a class="link navbarLink" href="#">
                            Link 3
                        </a>
    </div>
  </div>
</div>

谢谢。

答案 1 :(得分：0)

让pnp ≈ k1/6也具有弹性布局。 

p

顺便说一句，当我学会使用Flexbox布局时，这是一个非常有用的资源，对我有帮助。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

答案 2 :(得分：0)

遵循此链接https://flexboxfroggy.com/，有一个非常不错的游戏，它将教您 flexbox ，同时又可以立即玩。之后，您将可以修复导航。

相关问题
最新问题