将内容置于父级的中心，框位于左侧

Question

我想要一个布局如下：

因此我有一个父容器，在其内部居中的是面包屑。但是，我也想要容器内的徽标，它漂浮在面包屑的左侧，但尊重面包屑的边界。

我一直在玩弄 flexbox 并且只能通过绝对定位徽标来让它工作，这意味着面包屑不尊重徽标的边界。

我在这里整理了一个 JSFiddle 游乐场：https://jsfiddle.net/joyqwpc1/25/。

困难的是，徽标可以是可变宽度的，因此设置边距对此不可行。

body {
  margin: 0;
}

#container {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 50px;
}

#logo {
  height: 50px;
  width: 50px;
  background-color: blue;
  position: absolute;
  left: 0;
}

#breadcrumb {
  width: 200px;
  height: 20px;
  background-color: green;
}

<div id="container">
  <div id="logo"></div>
  <div id="breadcrumb"></div>
</div>

Answer 1

我为徽标和面包屑创建了 2 个单独的容器，并为它们设置了宽度。然后，我对齐这些容器内的元素。

https://jsfiddle.net/dmitriifrlv/vbhxrj1u/39/

<div id="container">
<div class="logoContainer">
  <div id="logo">
  
  </div>
</div>

  <div class="breadcrumbContainer">
    <div id="breadcrumb">
    
  </div>
  </div>

</div>

body {
  margin: 0;
}

#container {
 background: red;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 50px;
}
.logoContainer{
  width: 10%;
  height: 100%;
  background: yellow;
}

#logo {
  height: 50px;
  width: 100%;
  background-color: blue;
} 

.breadcrumbContainer{
  width:90%;
  display: flex;
  justify-content: center;
}
#breadcrumb {
  width: 200px;
  max-width: calc(100% - 2rem);
  height: 20px;
  background-color: green;
}

Answer 2

对于干净的解决方案，需要一点点 JavaScript：
确保 单击“运行 with JS” 按钮：https://jsbin.com/ziziqidole/edit?html,output

<html>
  <head>
    <script>
      function handleResize() {
        var crumb = document.getElementById("breadcrumb");
        var logoWidth = document.getElementById("logo").offsetWidth;

        var calcWidth = (window.innerWidth - crumb.offsetWidth) / 2 - logoWidth;
        if (calcWidth < 10) {
          calcWidth = 10;
        }
        crumb.style.marginLeft = calcWidth;
      }
    </script>
    <style media="all">
      body {
        margin: 0;
      }

      #container {
        background: red;
        display: flex;
        align-items: center;
        height: 50px;
        padding-right: 50px;
      }

      #logo {
        height: 50px;
        width: 150px;
        background-color: blue;

        flex-shrink: 0;
      }

      #breadcrumb {
        width: 200px;
        height: 20px;
        background-color: green;
      }
      #center {
        width: 200px;
        height: 20px;
        margin: 0 auto;
        background-color: khaki;
        text-align: center;
      }
    </style></head
  >
  <body onresize="handleResize()" onload="handleResize()">
    <div id="container">
      <div id="logo"></div>
      <div id="breadcrumb"></div>
    </div>
    <div id="center">Page Center</div>

  </body>
</html>

没有 JavaScript 的解决方案。但是需要一些硬编码，例如徽标宽度和面包屑宽度。
https://jsbin.com/juxijowova/edit?html,output

<html>
  <head>
    <style media="all">
      body {
        margin: 0;
      }

      #container {
        background: red;
        display: flex;
        align-items: center;
        height: 50px;
        padding-right: 50px;
      }

      #logo {
        height: 50px;
        width: 150px;
        background-color: blue;

        flex-shrink: 0;
      }

      #breadcrumb {
        width: 200px;
        height: 20px;
        background-color: green;

        position: absolute;
        left: max(260px, 50%); /* logo width + breadcrumb width/2 + margin*/
        transform: translate(-50%, 0);

        /*margin: 0 auto; 
          margin-left: 10px;/*use this if want to center on remaining area instead of screen center*/
      }
      #center {
        width: 200px;
        height: 20px;
        margin: 0 auto;
        background-color: khaki;
        text-align: center;
      }
    </style></head
  >
  <body>
    <div id="container">
      <div id="logo"></div>
      <div id="breadcrumb"></div>
    </div>
    <div id="center">Page Center</div>

  </body>
</html>

Answer 3

我通常是这样布置的：3 个容器，第 2 边会弯曲以均匀填充 space，因为它们具有完全相同的基础（自动基础会打破这一点，因为左边的“徽标" 内容将包含在左侧容器的基础中）。中间根据内容调整大小并保持居中，除非它变得太宽并且开始占据右边的 space 并变得不居中。

.f-row {
  display: flex;
}

.left-box {
  flex: 1 1 0.0000001px;
  padding: 1em;
  border: 1px solid blue;
}

.middle-box {
  padding: 1em;
  border: 1px solid red;
  justify-self: center
}

.right-box {
  padding: 1em;
  border: 1px solid green;
  flex: 1 0 0.0000001px;
}

<div class="f-row">
  <div class="left-box">Logo</div>
  <div class="middle-box">Breadcrumb</div>
  <div class="right-box"></div>
</div>

<br><br>

<div class="f-row">
  <div class="left-box">Logo</div>
  <div class="middle-box">Breadcrumb > Longer > Space</div>
  <div class="right-box"></div>
</div>

<br><br>

<div class="f-row">
  <div class="left-box">Logo</div>
  <div class="middle-box">Breadcrumb > Longer > Space > Too Much Now It's Taking Up Space From the Right, Uncentered Now</div>
  <div class="right-box"></div>
</div>

将内容置于父级的中心，框位于左侧

Centre content to parent with box to the left

html

css

navbar

flexbox