Làm thế nào để làm cho các mặt hàng flexbox có cùng kích thước?

Question

Tôi muốn sử dụng flexbox có một số mục có cùng chiều rộng. Tôi đã nhận thấy rằng flexbox phân phối không gian xung quanh đồng đều, chứ không phải là không gian riêng của nó.

Ví dụ:

.header { 
 
    display: flex; 
 
} 
 

 
.item { 
 
    flex-grow: 1; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
}

<div class="header"> 
 
    <div class="item">asdfasdfasdfasdfasdfasdf</div> 
 
    <div class="item">z</div> 
 
</div>

Mục đầu tiên là lớn hơn rất nhiều so với thứ hai. Nếu tôi có 3 mục, 4 mục hoặc n mục, tôi muốn tất cả chúng xuất hiện trên cùng một dòng với số lượng không gian bằng nhau cho mỗi mục.

Bất kỳ ý tưởng nào?

http://codepen.io/anon/pen/gbJBqM

Answer 1

Đặt họ để họ flex-basis là 0 (vì vậy tất cả các yếu tố có điểm khởi đầu giống nhau), và cho phép họ phát triển:

flex: 1 1 0

Answer 2

Bạn có thể thêm flex-basis: 100% để đạt được điều này .

Updated Example

.header { 
    display: flex; 
} 

.item { 
    flex-basis: 100% 
    text-align: center; 
    border: 1px solid black; 
} 

Đối với những gì nó có giá trị, bạn cũng có thể sử dụng flex: 1 cho kết quả tương tự là tốt.

Các viết tắt của flex: 1 cũng giống như flex: 1 1 0, tương đương với:

.item { 
    flex-grow: 1; 
    flex-shrink: 1; 
    flex-basis: 0; 
    text-align: center; 
    border: 1px solid black; 
} 

Answer 3

Thêm width: 0 giúp tôi giải quyết vấn đề

.item { 
     flex-grow: 1 1 0; 
     width: 0; 
    } 

đây là liên kết mà giúp tôi giải quyết vấn đề của tôi: Always equal flexbox columns