Как я могу расширить пустые поля на гибких элементах? - PullRequest
Новая
       29

Как я могу расширить пустые поля на гибких элементах?

0 голосов
/ 26 февраля 2020

enter image description here

Темно-серая область кликабельна, но синее поле не действует. Как я могу расширить остальные предметы меньшего размера, чтобы заполнить пространство? 

div.scrollmenu {
    display:flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #333;
    overflow: auto;
    flex-wrap: nowrap;

}

div.scrollmenu a {
    display: flex;
    color: white;
    text-align: left;
    padding: 14px;
    text-decoration: none;
    margin: auto;
    min-width: 25%;
    max-width: 25%;
}

1 Ответ

0 голосов
/ 26 февраля 2020

Добавьте свойство align-items: stretch; к div.scrollmenu и немного подправьте свой код. 

div.scrollmenu {
  display:flex;
  /* align-items: stretch; */ /* redundant */
  background-color: #333;
  flex-wrap: nowrap;
}

div.scrollmenu a {
  display: flex;
  align-items: center;
  /* uncomment this if you want them to be centered horizontally  */
  /*justify-content: center;*/
  padding: 1 14px;
  color: white;
  text-align: left;
  text-decoration: none;
  flex: 1;
}

Надеюсь, это поможет.

EDIT Вам даже не нужно align-items: stretch, потому что я считаю, что это свойство по умолчанию, так как результатом является то же самое, даже если вы пропустите это.

...