flexbox: số tiền tối thiểu của không gian giữa

Question

Với SCSS này/css:

div.container { 
    display:flex; 
    flex-flow: row wrap; 
    justify-content:space-between; 
    border: 1px solid blue; 
    div { 
    width: 200px; 
    border: 1px solid gray; 
    display:inline-block; 
    text-align: center; 
    } 
} 

bố trí này có mục đầu tiên trong mỗi hàng thẳng sang bên trái, và mục cuối cùng liên kết ở bên phải, theo yêu cầu. Here is a codepen illustrating.

Khi cửa sổ trình duyệt được thu hẹp, các phần tử div được phân phối sẽ di chuyển gần nhau hơn cho đến khi chúng chạm, tại thời điểm đó chúng được sắp xếp lại trên một hàng bổ sung. Một lần nữa, div đầu tiên trên mỗi hàng được căn trái, và căn phải cuối cùng với khoảng cách giữa.

Có cách nào để đặt khoảng cách tối thiểu sao cho các phần tử bên trong div luôn có khoảng cách giữa chúng.

đệm và lợi nhuận có thể sẽ không làm việc, như sự sắp xếp

<-- 1st left in row và last right in row --> sẽ không giữ.

Answer 1

Bạn có thể thêm div khác có kiểu flex để giữ khoảng cách cần thiết giữa các div bên trong. và chiều rộng tối thiểu cho khoảng trống đó sử dụng thuộc tính này (như được đề cập trong W3Schools.com):

flex: flex-flex flex-co flex-base | auto | initial | inherit;

mà flex-co là:

flex-teo: Một số quy định cụ thể bao nhiêu mặt hàng sẽ giảm tương đối so với phần còn lại của các mặt hàng linh hoạt

như vậy, ví dụ bạn đặt mã css này cho khoảng cách div:

flex: 1 0 10px; 

cho biết khoảng cách div sẽ có chiều rộng 10px và sẽ phát triển relat ive với phần còn lại của các mặt hàng linh hoạt, nhưng KHÔNG S SHN. do đó chiều rộng tối thiểu sẽ là 10px ở chiều rộng hẹp nhất của màn hình.

Answer 2

thử dưới đây css. Hi vọng điêu nay co ich.

div.container { 
    position:absolute; 
    border: 1px solid blue; 
    div { 
    width: 200px; 
    margin:0px; 
    border: 1px solid gray; 
    display: inline-block; 
    text-align: center; 
    } 
} 

Answer 3

Bit trễ bữa tiệc nhưng tôi gặp phải vấn đề tương tự. Cách tôi giải quyết nó có lẽ sẽ không làm việc cho tất cả mọi người nhưng ở đây nó là dành cho những người có thể sử dụng nó.

Ý tưởng cơ bản là bạn có khoảng cách tối thiểu là x. Bạn đặt lề trái và phải của mỗi mục thành x/2 để khoảng cách giữa các mục sẽ là x (lề + lề). Sau đó, bạn quấn tất cả các mục trong một vùng chứa có lề trái và phải của -x/2. Điều này sẽ ẩn lề trên các mục ở các cạnh của mỗi hàng.

Dưới đây là một ví dụ làm việc:

.box { 
 
    border: 1px solid black; 
 
    overflow-x: hidden; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    margin: 0 -1em; 
 
} 
 

 
.item { 
 
    display: flex; 
 
    border: 1px solid grey; 
 
    padding: 1em; 
 
    width: 20%; 
 
    margin: 0 1em; 
 
}

<div class="box"> 
 
    <div class="container"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    </div> 
 
</div>

Các overflow-x: hidden; trên .box là để ngăn chặn các thanh cuộn ngang mà xuất hiện trong một số trình duyệt vì sự tràn lề.

Nếu bạn muốn khoảng cách luôn nhất quán và đối với các hàng chỉ có một mục để có mục đó kéo dài toàn bộ hàng thì bạn có thể thêm flex-grow: 1 vào .item.