html - 如何为不对称的导航栏创建 css？

Question

我需要为这样的导航栏编写 css(黑色背景是网格，白色和灰色是导航栏本身):

所以我不知道如何创建 div 容器，从中心到左边有 550px，从中心到右边有 458px，以便在右上角添加橙色按钮。 另一件事是右边的橙色按钮应该占据屏幕末尾的所有空间

Answer 1

根据当屏幕变得比给定的 1100 像素更宽或更窄时会发生什么，这个答案可能需要一些调整。

如果你创建 3 个容器，然后给前 2 个 flex-basis(宽度)和最后一个 flex-grow(填充剩余空间)，你可以完成那个。

当没有足够的空间时，此示例将收缩left/right

.wrapper {
  display: flex;
}

.wrapper .left {
  flex-basis: 550px;
}

.wrapper .right {
  flex-basis: 458px;
  
  display: flex;
  justify-content: flex-end;    /*  align right (at end)  */
}

.wrapper .button {
  flex-grow: 1;
}


/* style for this demo */
.wrapper > div {
  padding: 5px;
  box-sizing: border-box;
  border: 1px dashed lightgray;
}

<div class="wrapper">

  <div class="left">
    Links left aligned
  </div>

  <div class="right">
    Links right aligned
  </div>

  <div class="button">
    Button
  </div>

</div>

---

此示例会在空间不足时保持left/right宽度，导致出现水平滚动条

.wrapper {
  display: flex;
}

.wrapper .left {
  flex-basis: 550px;
  flex-shrink: 0;             /*  disallow to shrink  */
}

.wrapper .right {
  flex-basis: 458px;
  flex-shrink: 0;             /*  disallow to shrink  */

  display: flex;
  justify-content: flex-end;    /*  align right (at end)  */
}

.wrapper .button {
  flex-grow: 1;
}


/* style for this demo */
.wrapper > div {
  padding: 5px;
  box-sizing: border-box;
  border: 1px dashed lightgray;
}

<div class="wrapper">

  <div class="left">
    Links left aligned
  </div>

  <div class="right">
    Links right aligned
  </div>

  <div class="button">
    Button
  </div>

</div>

---

此示例将缩小/增大left/right 并将您在图像中显示的中心标记 保持在其父图像的中心。

.wrapper {
  display: flex;
}

.wrapper .left {
  flex: 6 6 0;                  /*  6/12  */
  overflow: hidden;
}

.wrapper .right {
  flex: 5 5 0;                  /*  5/12  */
  overflow: hidden;
  
  display: flex;
  justify-content: flex-end;    /*  align right (at end)  */
}

.wrapper .button {
  flex: 1 1 0;                  /*  1/12  */
  overflow: hidden;
}


/* style for this demo */
.wrapper > div {
  padding: 15px 0;
  box-sizing: border-box;
  border: 1px dashed lightgray;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}

<div class="wrapper">

  <div class="left">
    Links left aligned
  </div>

  <div class="right">
    Links right aligned
  </div>

  <div class="button">
    Button
  </div>

</div>

<div class="mark-center">
  &uarr;    
</div>