Cố gắng điều hướng flexbox có tối đa 5 mục và ít nhất là 3, nhưng nó không chia chiều rộng bằng nhau giữa tất cả các yếu tố.

Vĩ cầm

Hướng dẫn mà tôi đang lập mô hình này sau là http://www.sitepoint.com/responsive-fluid- thong-variable-item-navlation-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>

Có một bit quan trọng không được đề cập trong bài viết mà bạn đã liên kết và đó là flex-basis. Theo mặc định flex-basislà auto.

Từ thông số kỹ thuật :

Nếu cơ sở flex được chỉ định là tự động, thì cơ sở flex được sử dụng là giá trị của thuộc tính kích thước chính của mục flex. (Đây có thể là từ khóa tự động, kích thước mục flex dựa trên nội dung của nó.)

Mỗi mục flex có một flex-basisloại giống như kích thước ban đầu của nó. Sau đó, từ đó, mọi không gian trống còn lại sẽ được phân phối theo tỷ lệ (dựa trên flex-grow) giữa các mục. Với auto, cơ sở đó là kích thước nội dung (hoặc kích thước được xác định với width, v.v.). Do đó, các mục có văn bản lớn hơn bên trong sẽ được cung cấp nhiều không gian hơn trong ví dụ của bạn.

Nếu bạn muốn các yếu tố của bạn hoàn toàn đồng đều, bạn có thể đặt flex-basis: 0. Điều này sẽ đặt cơ sở flex thành 0 và sau đó mọi không gian còn lại (sẽ là tất cả không gian vì tất cả các cơ sở là 0) sẽ được phân bổ theo tỷ lệ dựa trên flex-grow.

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

Sơ đồ này từ thông số kỹ thuật làm một công việc khá tốt để minh họa điểm.

Và đây là một ví dụ làm việc với fiddle của bạn.

Để tạo các phần tử có chiều rộng bằng nhau bằng cách sử dụng Flex, bạn nên đặt thành con của bạn (phần tử flex):

flex-basis: 25%;
flex-grow: 0;

Nó sẽ cung cấp cho tất cả các yếu tố trong hàng 25% chiều rộng. Họ sẽ không phát triển và đi từng người một.