Можно ли растягивать элементы, пока они лежат в основе во Flexbox? - PullRequest
Новая
       5

Можно ли растягивать элементы, пока они лежат в основе во Flexbox?

0 голосов
/ 26 сентября 2018

Пожалуйста, посмотрите на мой код ниже; 

<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>

Это скриншот моего кода;

enter image description here

Как видите, яесть заголовок и три кнопки управления с разной высотой.Я хочу растянуть все элементы flexbox по вертикали, пока они находятся на базовой линии.Возможно ли это сделать?

ОБНОВЛЕНИЕ:

На следующем рисунке показано, что для align-item установлено значение "baseline";

enter image description here

А следующий - когда align-item "stretch";

enter image description here

Кажется, что глифы выровнены, но они не,Просто играйте в браузерах, чтобы увидеть разницу.

1 Ответ

0 голосов
/ 26 сентября 2018

Я не знаю, что именно означает "растянуть", но я пытался; 

<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>

Скажите, если это не то, что вы хотели.

- ОБНОВЛЕНИЕ -

Я думаю, это то, что вы действительно хотите:>

Похоже,глифы не выровнены по центру, но я думаю, что это проблема самих глифов.

Если вы хотите проверить выравнивание глифов, удалите 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">−</button></li>
          <li><button class="btn">☐</button></li>
          <li><button class="btn">⨉</button></li>
        </ul>
      </div>
    </div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...