Question

请在下面查看我的代码；

<html>
<head>
<style>
.Window__caption {
  display: flex;
  align-items: baseline;
  background-color: #fff;
  border: 1px solid black;
}

.Window__title {
  margin: auto auto auto 5px;
  cursor: move;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Window__buttons {
  cursor: pointer;
  background-color: #fff;
  border: 0;
}

.Window__maximize-button:hover {
  background-color: #ddd;
}

.Window__minimize-button:hover {
  background-color: #ddd;
}

.Window__close-button:hover {
  color: #fff;
  background-color: #f00;
}

</style>
</head>
<body>
<div class="Window__caption">
<span class="Window__title">My First Window</span>
<button class="Window__buttons Window__minimize-button">−</button>
<button class="Window__buttons Window__maximize-button">☐</button>
<button class="Window__buttons Window__close-button">⨉</button>
</div>
</body>
</html>

这是我的代码的屏幕截图；

如您所见，我有一个标题和三个不同高度的控制按钮。我想要的是在基线状态下垂直拉伸所有flexbox项。可以这样做吗？

更新：

下图是align-item为“基准”时的情况；

下一个是align-item为“ stretch”时；

字形似乎对齐，但不对齐。只是玩一玩，看看其中的区别。

Answer 1

我不知道“伸展”的确切含义，但我尝试过；

<html>
<head>
<style>
.Window__caption {
  display: flex;
  height: 20rem;
  align-items: baseline;
  background-color: #fff;
  border: 1px solid black;
}

.Window__title {
  margin: 0 auto auto 5px;
  cursor: move;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
}

.Window__buttons {
  cursor: pointer;
  background-color: #fff;
  border: 0;
}

.Window__maximize-button:hover {
  background-color: #ddd;
}

.Window__minimize-button:hover {
  background-color: #ddd;
}

.Window__close-button:hover {
  color: #fff;
  background-color: #f00;
}

</style>
</head>
<body>
<div class="Window__caption">
<span class="Window__title">My First Window</span>
<button class="Window__buttons Window__minimize-button">−</button>
<button class="Window__buttons Window__maximize-button">☐</button>
<button class="Window__buttons Window__close-button">⨉</button>
</div>
</body>
</html>

如果这不是您想要的，请告诉我。

-更新-

我认为这是您真正想要的：>

字形似乎不在中心对齐，但是我认为这是字形本身的问题。

如果要检查字形的对齐方式，请删除`.btn'内部的justify-content: center;。您会看到它会稍微改变。

<html>
  <head>
  <style>
    * {
      margin: 0;
    }
    .container {
      width: 100%;  height: 10rem;
      display: flex;
      border: 1px solid black;
    }
    .title, .filter, .button-wrap {
      display:flex;  flex-flow: column;  justify-content: center;
    }
    .filter {
      flex-grow: 1.1;
    }
    ul, ul li {
      list-style: none;  list-style-type: none;
      display: flex;  flex-flow: row;
    }
    .btn {
      display: flex;  flex-flow: column;  justify-content: center;
    }
  </style>
  </head>
  <body>
    <div class="container">
      <span class="title">My First Window</span>
      <div class="filter"></div>
      <div class="button-wrap">
        <ul>
          <li><button class="btn">−</button></li>
          <li><button class="btn">☐</button></li>
          <li><button class="btn">⨉</button></li>
        </ul>
      </div>
    </div>
  </body>
</html>

在Flexbox处于基线状态时可以拉伸它们吗？

1 个答案: