主页 / 问题 / 682714
Accepted
Fangog
Asked:2020-06-23 06:31:37 +0000 UTC2020-06-23 06:31:37 +0000 UTC

如何正确布局 flexbox？

  • 772

.logo将两个菜单项推.right-items到右边缘时无法使其与中心对齐

menu {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

menu .items {
  margin: 0 20px;
  flex-basis: 50%;
}

menu .items.left {
  text-align: right;
}

menu .items.right {}

menu .items a {
  margin: 0 12.5px;
  font-size: 14px;
  text-transform: uppercase;
}

menu .items .right-items {
  font-size: 14px;
  text-transform: uppercase;
}

menu .logo {
  flex-basis: 100px;
  width: 100px;
  height: 100px;
  background: #000;
}
<menu>
  <div class="items left">
    <a href="">Пункт</a>
    <a href="">Пункт</a>
  </div>

  <div class="logo"></div>

  <div class="items right">
    <a href="">Пункт</a>
    <a href="">Пункт</a>
    <a href="">Пункт</a>

    <a href="" class="right-items">Пункт</a>
    <a href="" class="right-items">Пункт</a>
  </div>
</menu>

html

1 个回答

  1. Best Answer

    如果任务是在 flex 上，那么当然你仍然可以清理代码，但你的任务已经解决了。将项目简单地包裹在你的 div 中并拉伸。

    a {
  margin: 0 12.5px;
  font-size: 14px;
  text-transform: uppercase;
}

menu {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

menu .items {
  margin: 0 20px;
  flex-basis: 50%;
}

.left {
  text-align: right;
}

.right {
  display: flex;
  justify-content: space-between;
}

menu .logo {
  flex-basis: 100px;
  width: 100px;
  height: 100px;
  background: #000;
}
    <menu>
  <div class="items left">
    <a href="">Пункт</a>
    <a href="">Пункт</a>
  </div>

  <div class="logo"></div>

  <div class="items right">

    <div class="">
      <a href="">Пункт</a>
      <a href="">Пункт</a>
      <a href="">Пункт</a>
    </div>

    <div class="">
      <a href="" class="right-items">Пункт</a>
      <a href="" class="right-items">Пункт</a>
    </div>

  </div>
</menu>

    • 1

相关问题