Попытка навигации flexbox, которая имеет до 5 элементов и всего 3, но это не делит ширину поровну между всеми элементами.
скрипка
Учебное пособие, которое я моделирую после этого: http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/
SASS
* {
font-size: 16px;
}
.tabs {
max-width: 1010px;
width: 100%;
height: 5rem;
border-bottom: solid 1px grey;
margin: 0 0 0 6.5rem;
display: table;
table-layout: fixed;
}
.tabs ul {
margin: 0;
display: flex;
flex-direction: row;
}
.tabs ul li {
flex-grow: 1;
list-style: none;
text-align: center;
font-size: 1.313rem;
background: blue;
color: white;
height: inherit;
left: auto;
vertical-align: top;
text-align: left;
padding: 20px 20px 20px 70px;
border-top-left-radius: 20px;
border: solid 1px blue;
cursor: pointer;
}
.tabs ul li.active {
background: white;
color: blue;
}
.tabs ul li:before {
content: "";
}
<div class="tabs">
<ul>
<li class="active" data-tab="1">Pizza</li>
<li data-tab="2">Chicken Noodle Soup</li>
<li data-tab="3">Peanut Butter</li>
<li data-tab="4">Fish</li>
</ul>
</div>
Ответы:
Есть важный момент, который не упоминается в статье, с которой вы связаны, и это так
flex-basis
. По умолчаниюflex-basis
этоauto
.Из спецификации :
Каждый элемент flex имеет своего
flex-basis
рода начальный размер. Затем оттуда любое оставшееся свободное пространство распределяется пропорционально (на основеflex-grow
) между элементами. Приauto
этом основой является размер содержимого (или определенный размер с помощьюwidth
и т. Д.). В результате в вашем примере элементам с более крупным текстом выделяется больше места.Если вы хотите, чтобы ваши элементы были абсолютно ровными, вы можете установить
flex-basis: 0
. Это установит гибкое основание равным 0, и тогда любое оставшееся пространство (которое будет всем пространством, поскольку все основания равны 0) будет пропорционально распределено на основеflex-grow
.Эта диаграмма из спецификации довольно неплохо иллюстрирует ситуацию.
И вот рабочий пример с вашей скрипкой.
источник
flex: 1;
это сокращение для комбинацииflex-grow: 1
,flex-basis: 0
.Чтобы создать элементы с одинаковой шириной
Flex
, вы должны установить дочерний элемент (flex elements):Это даст всем элементам в ряду 25% ширины. Они не будут расти и идти один за другим.
источник