时间戳

首页 > 解决方案 > 是否可以在 Flexbox 中作为基线时拉伸项目？

html - 是否可以在 Flexbox 中作为基线时拉伸项目？

问题描述

请看下面我的代码；

<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">−&lt;/button>
<button class="Window__buttons Window__maximize-button">☐&lt;/button>
<button class="Window__buttons Window__close-button">⨉&lt;/button>
</div>
</body>
</html>

这是我的代码的截图；

在此处输入图像描述

如您所见，我有一个标题和三个不同高度的控制按钮。我想要的是在它们是基线时垂直拉伸所有 flexbox 项目。是否有可能做到这一点？

更新：

下图是align-item为“baseline”时；

在此处输入图像描述

下一个是当 align-item 为“拉伸”时；

在此处输入图像描述

字形似乎是对齐的，但它们不是。只需在浏览器中播放即可查看差异。

标签： htmlcssflexbox

解决方案

我不知道“伸展”到底是什么意思，但我试过了；

<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">−&lt;/button>
<button class="Window__buttons Window__maximize-button">☐&lt;/button>
<button class="Window__buttons Window__close-button">⨉&lt;/button>
</div>
</body>
</html>

告诉我这是否不是你想要的。

- 更新 -

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

看起来字形没有在中心对齐，但我认为这是字形本身的问题。

如果你想检查字形的对齐，删除justify-content: center;`.btn'里面。你可以看到它会略有变化。

<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">−&lt;/button></li>
          <li><button class="btn">☐&lt;/button></li>
          <li><button class="btn">⨉&lt;/button></li>
        </ul>
      </div>
    </div>
  </body>
</html>

推荐阅读