Как правильно сверстать табы на флексах?

Question

[ymfront]

Есть такой блок с табами:

HTML:

<div class="tabs__wrapper">
    <div class="tab" id="mailtab" data-register-type="email">
        <img class="icon" src="./img/email_icon.svg" alt="email icon">
        <span class="tab__text">மின்னஞ்சல் வழியாக</span>
    </div>
    <div class="tab active" id="phonetab" data-register-type="phone">
        <img class="icon" src="./img/phone_icon.svg" alt="phone icon">
        <span class="tab__text">தொலைபேசி மூலம்</span>
    </div>
</div>

CSS:

.tabs__wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.tab {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 10px;
  width: calc((100% - 8px)/2);
  border: 1px solid #2545B7;
  border-radius: 18px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

.tab.active {
  border: 1px solid #CD37E9;
  background: #CD37E9;
}

.tab .icon {
  margin: 0 8px 0 0;
  width: 14px;
}

.tab .tab__text {
  padding: 2px 0 0;
}

У блока .tab есть свойство justify-content: center, и все внутри этого блока должно выравниваться по центру.

Но проблема в том, что по центру ничего не выравнивается. Блок .tab__text занимает все свободное пространство. И .icon сжимается и ширина иконки составляет 12рх вместо указанных 14рх.



Но если я добавляю тег переноса <br>, то ширина .tab__text составляет ровно ширину текста, и все начинает выравниваться по центру.

<span class="tab__text">மின்னஞ்சல் <br> வழியாக</span>
<span class="tab__text">தொலைபேசி <br> மூலம்</span>

Как правильно сделать верстку, чтобы без тега <br> все работало правильно (все выравнивалось по центру, иконка не ужималась)?

Comments

[Владислав Черненко]

1. для иконки указывайте min-width
2. без br только ограничение ширины блоку: width, max-width

[Ankhena]

1. Иконки сжимаются, потому что забыли запретить это делать flex-shrink: 0

2. С центрированием вы ошибаетесь. Оно работает. Но дело в том, что родитель блоков .tab тоже флекс и его элементы занимают ширину по контенту. Соответственно, без разницы как вы там выравниваете внутренности, ведь свободного места для выравнивания всё равно нет и результат будет одинаковый при любом значении.
Если вы хотите выравнивать текст внутри tab__text, то для этого есть обычный text-align.

Когда не понятно что происходит, обводите элементы рамочками (полупрозрачный outline и отрицательный outline-offset на толщину обводки). Если сложно пользоваться инструментами разработчика.

p.s. эти иконки это не img.
Их нужно либо убрать в стили (псевдоэлементами - идеально) либо скрыть от скринридеров с помощью aria-hidden.

Answer 1

[Ivan Ustûžanin]

иконке как минимум добавить flex-shrink: 0;