Question

我对弹性显示感到困惑，我希望有人可以提供帮助。

我正在尝试重新创建此网站https://jsbin.com/vafexudini/edit?html,css

我需要一些内容在左边（部分-a），一部分在中间（部分-b），一些内容一直在右边（部分-c）。

section-a似乎是在正确的位置，但我无法将内容放在中间，一直都是正确的。

＆＃13;

.container-1 {
  display: flex;
  max-width: 100%;
  background-color: #F7F7F7;
  height: 60px;
  border-top: 1px solid #C1C1C1;
  border-bottom: 2px solid #C1C1C1;
}


/*section-a*/

.section-a {
  flex: 1;
  position: relative;
  top: 20px;
}

.section-a span.file {
  margin-right: 15px;
}

#image {
  float: left;
  margin-right: 10px;
  position: relative;
  bottom: 7px;
}


/*section-b*/

.section-b {
  flex: 2;
  position: relative;
  top: 20px;
  justify-content: center;
}

.section-b span {
  border: 2px solid #C1C1C1;
  padding: 7px;
  margin-right: -7px;
  justify-content: center;
}

.left-edge {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.right-edge {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.section-b span:hover {
  cursor: pointer;
  background-color: #E8F2FF;
}

.section-b span:active {
  background-color: #E8F2FF;
}


/*section-c*/

.section-c {
  flex: 1;
  position: relative;
  top: 20px;
}

.section-c span {
  margin-right: 5px;
}

span.highlight {
  background-color: yellow;
  padding: 7px;
}

＆＃13;

<div class="container-1">
  <div class=section-a>
    <div id="image">
      <image src="images/file-image.png" alt="file image"/>
    </div>
    <span class="file">File</span>
    <span>Add Library</span>
  </div>

  <div class="section-b">
    <span class="left-edge htmlToggle">HTML</span>
    <span class="cssToggle">CSS</span>
    <span class="jsToggle">JavaScript</span>
    <span class="consoleToggle">Console</span>
    <span class="right-edge outputToggle">Output</span>
  </div>

  <div class="section-c">
    <span class="highlight">Login or Register</span>
    <span>Blog</span>
    <span>Help</span>
  </div>
</div>

＆＃13;

Answer 1

将justify-content: space-between;添加到容器中，从子元素中删除所有flex参数，并删除其中的一个负边距：

.container-1 {
  display: flex;
  justify-content: space-between;
  max-width: 100%;
  background-color: #F7F7F7;
  height: 60px;
  border-top: 1px solid #C1C1C1;
  border-bottom: 2px solid #C1C1C1;
}


/*section-a*/

.section-a {
  position: relative;
  top: 20px;
}

.section-a span.file {
  margin-right: 15px;
}

#image {
  float: left;
  margin-right: 10px;
  position: relative;
  bottom: 7px;
}


/*section-b*/

.section-b {
  position: relative;
  top: 20px;
  justify-content: center;
}

.section-b span {
  border: 2px solid #C1C1C1;
  padding: 7px;
}

.left-edge {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.right-edge {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.section-b span:hover {
  cursor: pointer;
  background-color: #E8F2FF;
}

.section-b span:active {
  background-color: #E8F2FF;
}


/*section-c*/

.section-c {
  position: relative;
  top: 20px;
}

.section-c span {
  margin-right: 5px;
}

span.highlight {
  background-color: yellow;
  padding: 7px;
}

<div class="container-1">
  <div class=section-a>
    <div id="image">
      <image src="images/file-image.png" alt="file image"/>
    </div>
    <span class="file">File</span>
    <span>Add Library</span>
  </div>

  <div class="section-b">
    <span class="left-edge htmlToggle">HTML</span>
    <span class="cssToggle">CSS</span>
    <span class="jsToggle">JavaScript</span>
    <span class="consoleToggle">Console</span>
    <span class="right-edge outputToggle">Output</span>
  </div>

  <div class="section-c">
    <span class="highlight">Login or Register</span>
    <span>Blog</span>
    <span>Help</span>
  </div>
</div>

Answer 2

您还可以使用flex＆amp; justify-content和section-a的{{1}}。

-c也可用于flex。

-b也可以提供帮助。

flex-wrap代替align-items + position也可能有用。

top可能比min-height更安全（或不依赖于其他内容/设计）

height和＆amp;在我看来，c是一个不错的选择。

例如

＆＃13;

flex:1

＆＃13;

.container-1 {
  display: flex;
  max-width: 100%;
  background-color: #F7F7F7;
  min-height: 60px;
  border-top: 1px solid #C1C1C1;
  border-bottom: 2px solid #C1C1C1;
  align-items:center;
}




.section-a, .section-c {
  flex: 1;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.section-a span.file {
  margin-right: 15px;
}

#image {
  float: left;
  margin-right: 10px;
  position: relative;
  bottom: 7px;
}


/*section-b*/

.section-b {
  display:flex;
  flex-wrap:nowrap;
}

.section-b span {
  border: 2px solid #C1C1C1;
  padding: 7px;
}

.left-edge {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.right-edge {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.section-b span:hover {
  cursor: pointer;
  background-color: #E8F2FF;
}

.section-b span:active {
  background-color: #E8F2FF;
}


/*section-c*/

.section-c {
  justify-content:flex-end;
}

.section-c span {
  margin-right: 5px;
}

span.highlight {
  background-color: yellow;
  padding: 7px;
}

＆＃13;

使用弹性显示对齐标题中的内容

2 个答案: