Thay đổi biện minh-Hàm lượng giá trị khi mục flex tràn chứa

Question

Nhìn vào sau fiddle https://jsfiddle.net/27x7rvx6

CSS (#test là chứa flexbox, và .items là con của nó):

#test { 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: center; 
    width: 300px; 
    margin-left: 150px; 
    border: 2px solid red; 
} 
.item { 
    flex: 0 0 70px; 
    margin-right: 10px; 
    background: blue; 
    height: 70px; 
    border: 2px solid black; 
} 

Có một dòng một (nowrap) flexbox với các mục có kích thước cố định. Vùng chứa có justify-content được đặt thành center. Bởi vì các mục không thể co lại và cùng nhau rộng hơn container mà chúng bắt đầu tràn.

Vấn đề của tôi là nội dung tràn cả bên trái và bên phải. Có cách nào để làm cho nội dung hợp lý thành trung tâm nhưng một khi nó bắt đầu tràn, nó hoạt động như thuộc tính justify-content được đặt thành flex-start, resp. làm cho nó tràn chỉ bên phải của container?

Answer 1

justify-content không phải là cách tiếp cận phù hợp để tập trung vì vấn đề bạn mô tả.

Thay vào đó, tôi khuyên bạn nên auto margins. Bạn có thể sử dụng chúng để trung tâm:

Trước khi liên kết qua justify-content và align-self, bất kỳ không gian trống dương tính được phân phối đến lề tự động ở chỗ kích thước.

Và họ cư xử như bạn muốn với overflow:

hộp tràn bỏ qua lề tự động và tràn theo hướng end .

Ví dụ, bạn có thể thiết lập margin-left: auto đến mục flex đầu tiên và margin-right: auto đến cuối cùng một, hoặc chèn ::before và ::after pseudo-yếu tố.

.test { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    width: 200px; 
 
    border: 2px solid red; 
 
    margin: 10px; 
 
} 
 
.wide.test { 
 
    width: 500px; 
 
} 
 
.test::before, .test::after { 
 
    content: ''; /* Insert pseudo-element */ 
 
    margin: auto; /* Make it push flex items to the center */ 
 
} 
 
.item { 
 
    flex: 0 0 50px; 
 
    margin-right: 10px; 
 
    background: blue; 
 
    height: 50px; 
 
    border: 2px solid black; 
 
}

<div class="test"> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
</div> 
 
<div class="wide test"> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
</div>