Flexbox gibt den Elementen keine gleichmäßige Breite

Question

Ein Versuch, eine Flexbox-Navigation mit bis zu 5 Elementen und mindestens 3 Elementen zu erstellen, aber sie teilt die Breite nicht gleichmäßig zwischen allen Elementen auf.

Fiddle

Das Tutorial, dem ich folge, ist http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

* {
  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: "";
}

    Pizza
    Hühnernudelsuppe
    Erdnussbutter
    Fisch

Answer 1

Flex gibt in allen Fällen möglicherweise nicht gleiche Breiten an Kinder.

Verwenden Sie CSS-Grid für gleich breite Elemente.

.el{
 display: grid;
 grid-auto-flow: column;
 grid-auto-columns: 1fr
}

Referenz https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/

Wenn Sie nur CSS Flex verwenden möchten, gibt es einige Möglichkeiten

1. flex-basis: 100% für alle Kinder, das wird eine gute Übereinstimmung sein. ODER
2. flex-basis: 0 dies ist weniger nützlich als die erste Option.