Cách tốt hơn để đặt khoảng cách giữa các mục flexbox

885
Sasha Koss 2013-12-17 19:35.

Để đặt khoảng cách tối thiểu giữa các mục flexbox mà tôi đang sử dụng margin: 0 5pxtrên .itemmargin: 0 -5pxtrên thùng chứa. Đối với tôi, nó giống như một vụ hack, nhưng tôi không thể tìm ra cách nào tốt hơn để làm điều này.

Thí dụ

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

30 answers

475
Noname 2013-12-18 22:31.
  • Flexbox không có lề thu gọn.
  • Flexbox không có bất kỳ thứ gì giống border-spacingvới bảng (ngoại trừ thuộc tính CSS gapkhông được hỗ trợ trong Safari, caniuse )

Do đó đạt được những gì bạn đang yêu cầu sẽ khó hơn một chút.

Theo kinh nghiệm của tôi, cách "sạch sẽ nhất" mà không sử dụng :first-child/ :last-childvà hoạt động mà không cần bất kỳ sửa đổi nào flex-wrap:wraplà đặt padding:5pxtrên thùng chứa và margin:5pxtrên trẻ em. Điều đó sẽ tạo ra 10pxkhoảng cách giữa mỗi đứa trẻ và giữa mỗi đứa trẻ và cha mẹ của chúng.

Bản giới thiệu

.upper
{
  margin:30px;
  display:flex;
  flex-direction:row;
  width:300px;
  height:80px;
  border:1px red solid;

  padding:5px; /* this */
}

.upper > div
{
  flex:1 1 auto;
  border:1px red solid;
  text-align:center;

  margin:5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */
{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}
<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

213
Roumelis George 2014-12-19 23:52.

Đây không phải là một vụ hack. Kỹ thuật tương tự cũng được bootstrap và lưới của nó sử dụng, tuy nhiên, thay vì margin, bootstrap sử dụng padding cho cols của nó.

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}
124
Dariusz Sikorski 2016-10-05 12:30.

Flexbox và css calc với hỗ trợ nhiều hàng

Xin chào, dưới đây là giải pháp làm việc của tôi cho tất cả các trình duyệt hỗ trợ flexbox. Không có lợi nhuận âm.

Bản trình diễn Fiddle

   
.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flexbox > div {
  /*
    1/3  - 3 columns per row
    10px - spacing between columns 
  */
  box-sizing: border-box;
  margin: 10px 10px 0 0;
  outline: 1px dotted red;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}

/*
  align last row columns to the left
  3n - 3 columns per row
*/
.flexbox > div:nth-child(3n) {
  margin-right: 0;
}

.flexbox::after {
  content: '';
  flex: auto;
}

/*
  remove top margin from first row
  -n+3 - 3 columns per row 
*/
.flexbox > div:nth-child(-n+3) {
  margin-top: 0;
}
<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

Hãy lưu ý rằng mã này có thể ngắn hơn khi sử dụng SASS

Cập nhật 2020.II.11 Các cột được căn chỉnh ở hàng cuối cùng bên trái

Cập nhật 2020.II.14 Đã xóa lề dưới cùng ở hàng cuối cùng

100
Do Async 2018-02-13 08:17.

Bạn có thể sử dụng & > * + *làm bộ chọn để mô phỏng flex-gap(cho một dòng):

#box { display: flex; width: 230px; outline: 1px solid blue; }
.item { background: gray; width: 50px; height: 100px; }

/* ----- Flexbox gap: ----- */

#box > * + * {
  margin-left: 10px;
}
<div id='box'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

Nếu bạn cần hỗ trợ gói flex , bạn có thể sử dụng phần tử wrapper:

.flex { display: flex; flex-wrap: wrap;  }
.box { background: gray; height: 100px; min-width: 100px; flex: auto; }
.flex-wrapper {outline: 1px solid red; }

/* ----- Flex gap 10px: ----- */

.flex > * {
  margin: 5px;
}
.flex {
  margin: -5px;
}
.flex-wrapper {
  width: 400px; /* optional */
  overflow: hidden; /* optional */
}
<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>
</div>

94
hexalys 2013-12-20 16:33.

Bạn có thể sử dụng đường viền trong suốt.

Tôi đã suy nghĩ về vấn đề này trong khi cố gắng xây dựng mô hình lưới linh hoạt có thể dự phòng cho bảng + mô hình ô bảng cho các trình duyệt cũ hơn. Và đường viền cho máng xối cột đối với tôi dường như là sự lựa chọn thích hợp nhất. tức là ô bảng không có lề.

ví dụ

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

Cũng lưu ý rằng bạn cần có min-width: 50px;flexbox. Mô hình flex sẽ không xử lý các kích thước cố định trừ khi bạn thực hiện flex: none;trên phần tử con cụ thể mà bạn muốn là cố định và do đó bị loại trừ "flexi". http://jsfiddle.net/GLpUp/4/ Nhưng tất cả các cột cùng với flex:none;không còn là mô hình linh hoạt nữa. Đây là một cái gì đó gần hơn với mô hình flex: http://jsfiddle.net/GLpUp/5/

Vì vậy, bạn thực sự có thể sử dụng lề một cách bình thường nếu bạn không cần dự phòng ô bảng cho các trình duyệt cũ hơn. http://jsfiddle.net/GLpUp/3/

Việc thiết lập background-clip: padding-box;sẽ cần thiết khi sử dụng nền, vì nếu không nền sẽ chảy vào vùng viền trong suốt.

82
weBBer 2018-02-13 23:44.

Giải pháp này sẽ hoạt động cho mọi trường hợp ngay cả khi có nhiều hàng hoặc bất kỳ số phần tử nào. Nhưng số lượng của phần phải bằng nhau mà bạn muốn 4 ở hàng đầu tiên và 3 ở hàng thứ hai, nó sẽ không hoạt động theo cách đó không gian cho nội dung thứ 4 sẽ trống mà vùng chứa sẽ không lấp đầy.

Chúng tôi đang sử dụng display: grid; và các thuộc tính của nó.

#box {
  display: grid;
  width: 100px;
  grid-gap: 5px;
  /* Space between items */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* Decide the number of columns and size */
}

.item {
  background: gray;
  width: 100%;
  /* width is not necessary only added this to understand that width works as 100% to the grid template allocated space **DEFAULT WIDTH WILL BE 100%** */
  height: 50px;
}
<div id='box'>
  <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 class='item'></div>
  <div class='item'></div>
</div>

Nhược điểm của phương pháp này là trong Mobile Opera Mini sẽ không được hỗ trợ và trong PC, phương pháp này chỉ hoạt động sau IE10 .

Lưu ý để hoàn toàn tương thích trình duyệt bao gồm IE11, vui lòng sử dụng Trình sửa lỗi tự động


CÂU TRẢ LỜI CŨ

Đừng nghĩ về nó như một giải pháp cũ, nó vẫn là một trong những giải pháp tốt nhất nếu bạn chỉ muốn một hàng phần tử duy nhất và nó sẽ hoạt động với tất cả các trình duyệt.

Phương pháp này được sử dụng bởi tổ hợp anh em CSS , vì vậy bạn cũng có thể thao tác với nó theo nhiều cách khác, nhưng nếu kết hợp của bạn sai, nó cũng có thể gây ra sự cố.

.item+.item{
  margin-left: 5px;
}

Đoạn mã dưới đây sẽ thực hiện thủ thuật. Trong phương pháp này, không có nhu cầu để cung cấp cho margin: 0 -5px;đến #boxwrapper.

Một mẫu làm việc cho bạn:

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 22px;
  height: 50px;
}
.item+.item{
 margin-left: 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

35
Flimm 2019-09-22 05:40.

gapThuộc tính CSS :

Có một gapthuộc tính CSS mới cho các bố cục nhiều cột, flexbox và lưới hiện hoạt động trong một số trình duyệt! (Xem Tôi có thể sử dụng liên kết 1 ; liên kết 2 ).

#box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Theo văn bản, điều này hoạt động trên Firefox, Chrome và Edge nhưng không hoạt động trên Safari.

31
Stickers 2016-03-13 13:09.

Giả sử nếu bạn muốn đặt 10pxkhoảng cách giữa các mục, bạn có thể chỉ cần đặt .item {margin-right:10px;}cho tất cả và đặt lại nó trên mục cuối cùng.item:last-child {margin-right:0;}

Bạn cũng có thể sử dụng bộ chọn anh chị em chung ~hoặc +bộ chọn anh chị em kế tiếp để đặt lề trái trên các mục ngoại trừ mục đầu tiên .item ~ .item {margin-left:10px;}hoặc sử dụng.item:not(:last-child) {margin-right: 10px;}

Flexbox thông minh đến mức nó tự động tính toán lại và phân phối lưới đều nhau.

body {
  margin: 0;
}

.container {
  display: flex;
}

.item {
  flex: 1;
  background: gray;
  height: 50px;
}

.item:not(:last-child) {
  margin-right: 10px;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Nếu bạn muốn cho phép bọc flex , hãy xem ví dụ sau.

body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}

.item {
  flex: 0 0 calc(50% - 10px);
  background: gray;
  height: 50px;
  margin: 0 0 10px 10px;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

16
Simon Epskamp 2015-04-13 06:05.

Tôi đã tìm thấy một giải pháp dựa trên bộ chọn anh chị em chung ~và cho phép lồng vô hạn.

Xem bút mã này để biết ví dụ hoạt động

Về cơ bản, bên trong các vùng chứa cột, mọi con đứng trước con khác đều có lợi nhuận cao nhất. Tương tự như vậy, bên trong mỗi vùng chứa hàng, mọi con đứng trước con khác sẽ có lề trái.

.box {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
}

.box.columns {
  flex-direction: row;
}

.box.columns>.box~.box {
  margin-left: 5px;
}

.box.rows {
  flex-direction: column;
}

.box.rows>.box~.box {
  margin-top: 5px;
}
<div class="box columns">
  <div class="box" style="background-color: red;"></div>
  <div class="box rows">
    <div class="box rows">
      <div class="box" style="background-color: blue;"></div>
      <div class="box" style="background-color: orange;"></div>
      <div class="box columns">
        <div class="box" style="background-color: yellow;"></div>
        <div class="box" style="background-color: pink;"></div>
      </div>
    </div>
    <div class="box" style="background-color: green;"></div>
  </div>
</div>

14
chris 2014-11-13 00:59.

Tiếp tục từ câu trả lời của sawa, đây là một phiên bản được cải tiến một chút cho phép bạn đặt khoảng cách cố định giữa các mục mà không có lề xung quanh.

http://jsfiddle.net/chris00/s52wmgtq/49/

Ngoài ra còn có phiên bản Safari "-webkit-flex".

.outer1 {
    background-color: orange;
    padding: 10px;
}

.outer0 {
    background-color: green;
    overflow: hidden;
}

.container
{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;    
    -webkit-flex-wrap: wrap;
    background-color: rgba(0, 0, 255, 0.5);
    margin-left: -10px;
    margin-top: -10px;
}

.item
{
    flex-grow: 1;
    -webkit-flex-grow: 1;
    background-color: rgba(255, 0, 0, 0.5);
    width: 100px;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    color: white;
}

<div class="outer1">
    <div class="outer0">
        <div class="container">
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
        </div>
    </div>
</div>
14
Eliya Cohen 2019-11-15 02:23.

Cập nhật

Chrome 84 hiện hỗ trợ thuộc gaptính.

Câu trả lời ban đầu

Theo #ChromDevSummit, có một bản triển khai thuộc gaptính cho Flexbox, mặc dù tại thời điểm này (ngày 14 tháng 11 năm 2019), nó chỉ được hỗ trợ trong Firefox nhưng sẽ sớm được triển khai trong Chrome:

Bản thử trực tiếp

Tôi sẽ cập nhật câu trả lời của mình khi nó cũng được đưa vào Chrome.

10
Tim 2015-11-10 06:28.

Một thùng chứa flex với -x (tiêu cực) lợi nhuậnmục flex với x (dương tính) lợi nhuận hoặc đệm đều dẫn đến kết quả hình ảnh mong muốn: Các sản phẩm Flex có một khoảng cách cố định của 2x duy nhất giữa mỗi khác.

Nó dường như chỉ đơn giản là vấn đề sở thích, sử dụng margin hay padding trên các mục flex.

Trong ví dụ này, các mục linh hoạt được chia tỷ lệ động để bảo toàn khoảng cách cố định:

.flex-container { 
  margin: 0 -5px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-item {
  margin: 0 5px; // Alternatively: padding: 0 5px;
  flex: 1 0 auto;
}
9
Veiko Jääger 2014-12-24 04:05.

Tôi đã sử dụng điều này cho các cột có chiều rộng được bọc và cố định. Chìa khóa ở đây làcalc()

Mẫu SCSS

$gap: 10px;

dl {
  display: flex;
  flex-wrap: wrap;
  padding: $gap/2;

  dt, dd {
    margin: $gap/2;}

  dt { // full width, acts as header
    flex: 0 0 calc(100% - #{$gap});}

  dd { // default grid: four columns 
    flex: 0 0 calc(25% - #{$gap});}

  .half { // hall width columns
    flex: 0 0 calc(50% - #{$gap});}

}

Mẫu Codepen đầy đủ

8
Ollie Williams 2018-02-15 14:28.

Cuối cùng họ sẽ thêm thuộc gaptính vào flexbox. Cho đến lúc đó, bạn có thể sử dụng lưới CSS thay thế đã có thuộc gaptính và chỉ có một hàng duy nhất. Tốt hơn là giải quyết lợi nhuận.

5
iClusterDev 2017-08-30 09:15.

Sử dụng Flexbox trong giải pháp của mình, tôi đã sử dụng thuộc justify-contenttính cho phần tử mẹ (vùng chứa) và tôi đã chỉ định các lề bên trong thuộc flex-basistính của các mục. Kiểm tra đoạn mã bên dưới:

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-bottom: 10px;
}

.item {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #999;
}

.item-1-4 {
  flex-basis: calc(25% - 10px);
}

.item-1-3 {
  flex-basis: calc(33.33333% - 10px);
}

.item-1-2 {
  flex-basis: calc(50% - 10px);
}
<div class="container">
  <div class="item item-1-4">1</div>
  <div class="item item-1-4">2</div>
  <div class="item item-1-4">3</div>
  <div class="item item-1-4">4</div>
</div>
<div class="container">
  <div class="item item-1-3">1</div>
  <div class="item item-1-3">2</div>
  <div class="item item-1-3">3</div>
</div>
<div class="container">
  <div class="item item-1-2">1</div>
  <div class="item item-1-2">2</div>
</div>

5
Michael Benjamin 2018-02-13 10:39.

Với flexbox, việc tạo ra các máng xối là một công việc khó khăn, đặc biệt là khi phải quấn.

Bạn cần sử dụng lợi nhuận âm ( Cách tốt hơn để đặt khoảng cách giữa các mục flexbox ):

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

... hoặc thay đổi HTML ( như được hiển thị trong một câu trả lời khác ):

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

... hoặc cái gì khác.

Trong mọi trường hợp, bạn cần một bản hack xấu xí để làm cho nó hoạt động vì flexbox không cung cấp flex-gaptính năng "" ( ít nhất là hiện tại ).

Tuy nhiên, vấn đề máng xối rất đơn giản và dễ dàng với CSS Grid Layout.

Thông số Grid cung cấp các thuộc tính tạo khoảng cách giữa các mục lưới, đồng thời bỏ qua khoảng cách giữa các mục và vùng chứa. Các thuộc tính này là:

  • grid-column-gap
  • grid-row-gap
  • grid-gap (viết tắt của cả hai thuộc tính trên)

Gần đây, thông số kỹ thuật đã được cập nhật để phù hợp với Mô-đun căn chỉnh hộp CSS , cung cấp một tập hợp các thuộc tính căn chỉnh để sử dụng trên tất cả các mô hình hộp. Vì vậy, các thuộc tính bây giờ là:

  • column-gap
  • row-gap
  • gap (tốc ký)

Tuy nhiên, không phải tất cả các trình duyệt hỗ trợ Grid đều hỗ trợ các thuộc tính mới hơn, vì vậy tôi sẽ sử dụng các phiên bản gốc trong bản demo bên dưới.

Ngoài ra, nếu cần khoảng cách giữa các mục và vùng chứa, thì paddingtrên vùng chứa vẫn hoạt động tốt (xem ví dụ thứ ba trong bản trình diễn bên dưới).

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

10.1. Máng xối: các row-gap, column-gapgap thuộc tính

Thuộc tính row-gapcolumn-gap(và gapcách viết tắt của chúng ), khi được chỉ định trên vùng chứa lưới, xác định các rãnh giữa các hàng lưới và cột lưới. Cú pháp của chúng được định nghĩa trong CSS Box Alignment 3 §8 Khoảng cách giữa các hộp .

Ảnh hưởng của các thuộc tính này giống như độ dày của các đường lưới bị ảnh hưởng: đường lưới giữa hai đường lưới là không gian giữa các rãnh đại diện cho chúng.

.box {
  display: inline-grid;
  grid-auto-rows: 50px;
  grid-template-columns: repeat(4, 50px);
  border: 1px solid black;
}

.one {
  grid-column-gap: 5px;
}

.two {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.three {
  grid-gap: 10px;
  padding: 10px;
}

.item {
  background: lightgray;
}
<div class='box one'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box two'>
  <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 class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box three'>
  <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 class='item'></div>
  <div class='item'></div>
</div>

Thêm thông tin:

4
tillsanders 2016-04-18 04:44.

Tại sao không làm như thế này:

.item + .item {
    margin-left: 5px;
}

Điều này sử dụng bộ chọn anh chị em liền kề , để cung cấp cho tất cả các .itemphần tử, ngoại trừ phần tử đầu tiên a margin-left. Nhờ flexbox, điều này thậm chí còn tạo ra các phần tử rộng như nhau. Điều này cũng có thể được thực hiện với các phần tử được định vị theo chiều dọc và margin-toptất nhiên.

4
MK10 2017-01-20 04:17.

Đây là giải pháp của tôi, không yêu cầu đặt bất kỳ lớp nào trên các phần tử con:

.flex-inline-row {
    display: inline-flex;
    flex-direction: row;
}

.flex-inline-row.flex-spacing-4px > :not(:last-child) {
    margin-right: 4px;
}

Sử dụng:

<div class="flex-inline-row flex-spacing-4px">
  <span>Testing</span>
  <span>123</span>
</div>

Kỹ thuật tương tự có thể được sử dụng cho các hàng và cột linh hoạt thông thường ngoài ví dụ nội tuyến được đưa ra ở trên và được mở rộng với các lớp cho khoảng cách khác 4px.

4
wutzebaer 2018-05-26 10:10.

Tôi thường sử dụng toán tử + cho những trường hợp như vậy

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
.item + .item {
    margin-left: 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

3
lukefrake 2014-08-12 01:09.

Tôi thấy cách dễ nhất để làm điều này là với tỷ lệ phần trăm và chỉ cho phép lợi nhuận kiểm đếm chiều rộng của bạn

Điều này có nghĩa là bạn sẽ kết thúc với một cái gì đó như thế này nếu bạn sử dụng ví dụ của mình

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

Có nghĩa là giá trị của bạn dựa trên chiều rộng, mặc dù điều này có thể không tốt cho mọi người.

2
buildpax 2017-08-03 20:44.

Dưới đây là lưới các phần tử giao diện người dùng thẻ với khoảng cách được hoàn thành bằng cách sử dụng hộp linh hoạt:

Tôi đã thất vọng với việc giãn cách các thẻ theo cách thủ công bằng cách thao tác đệm và lề với kết quả không đẹp mắt. Vì vậy, đây là sự kết hợp của các thuộc tính CSS mà tôi thấy rất hiệu quả:

.card-container {
  width: 100%;
  height: 900px;
  overflow-y: scroll;
  max-width: inherit;
  background-color: #ffffff;
  
  /*Here's the relevant flexbox stuff*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap; 
}

/*Supplementary styles for .card element*/
.card {
  width: 120px;
  height: 120px;
  background-color: #ffeb3b;
  border-radius: 3px;
  margin: 20px 10px 20px 10px;
}
<section class="card-container">
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
      </section>

Hy vọng điều này sẽ giúp ích cho mọi người, hiện tại và tương lai.

2
zurfyx 2017-11-11 00:08.

Columnify - Một lớp solo cho N cột

Flexbox và SCSS

.columnify {
  display: flex;

  > * {
    flex: 1;

    &:not(:first-child) {
      margin-left: 2rem;
    }
  }
}

Flexbox và CSS

.columnify {
  display: flex;
}

.columnify > * {
  flex: 1;
}

.columnify > *:not(:first-child) {
  margin-left: 2rem;
}
<div class="columnify">
  <div style="display: inline-block; height: 20px; background-color: blue;"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
</div>

Chơi với nó trên JSFiddle .

2
Andres Paul 2020-01-08 01:45.

Bạn có thể sử dụng thuộc tính mới gap. Tôi sao chép, dán lời giải thích tôi tìm thấy trong bài viết này , cũng như thêm thông tin

Bố cục lưới CSS đã có khoảng trống (trước đây là khoảng cách lưới) trong một thời gian. Bằng cách chỉ định khoảng cách bên trong của phần tử chứa thay vì khoảng cách xung quanh phần tử con, khoảng trống giải quyết nhiều vấn đề về bố cục phổ biến. Ví dụ: với khoảng trống, bạn không phải lo lắng về việc lề trên các phần tử con gây ra khoảng trắng không mong muốn xung quanh các cạnh của phần tử chứa:

Thật không may ngay bây giờ, chỉ có FireFox hỗ trợ khoảng trống trong bố cục linh hoạt.

@use postcss-preset-env {
  stage: 0;
  browsers: last 2 versions
}

section {
  width: 30vw;
  
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
  
  &[flex] {
    display: flex;
    flex-wrap: wrap;
  }
  
  margin-bottom: 3rem;
}

.tag {
  color: white;
  background: hsl(265 100% 47%);
  padding: .5rem 1rem;
  border-radius: 1rem;
}

button {
  display: inline-flex;
  place-items: center;
  gap: .5rem;
  background: hsl(265 100% 47%);
  border: 1px solid hsl(265 100% 67%);
  color: white;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-size: 1.25rem;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
<section>
  <h1>Grid</h1> 
  <div class="tag">Awesome</div>
  <div class="tag">Coo</div>
  <div class="tag">Rad</div>
  <div class="tag">Math</div>
</section>
<br>
<section flex>
  <h1>Flex</h1>
  <div class="tag">Awesome</div>
  <div class="tag">Coo</div>
  <div class="tag">Rad</div>
  <div class="tag">Math</div>
</section>

1
Amo Wu 2017-02-16 17:35.

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
/* u mean utility */
.u-gap-10 > *:not(:last-child) {
  margin-right: 10px;
}
<div id='box' class="u-gap-10">
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

1
Andrew Luca 2018-01-12 12:37.

Chỉ cần sử dụng .item + .itemtrong bộ chọn để khớp từ thứ hai.item

#box {
  display: inline-flex;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 10px;
  height: 50px;
}

#box .item + .item {
  margin-left: 10px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

1
Keviin Cosmos 2018-04-12 21:02.

Tôi đã tìm thấy một bản hack bởi vì tôi thực sự cần cái này của chính mình.

/* grid */
.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.container::after, /* this makes sure odd element goes left and not space between */
.item {
  content:"";
  width: calc(33.3333% - 20px);
  margin-bottom: 40px;
}

/* extra styling - not important */
.item {
  height: 100px;
  background: #787878;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Đây là một lưới bài đăng với các danh mục phát triển linh hoạt tuyệt vời. Tôi nghĩ bạn thích nó. Xem Codepen

1
Salman A 2018-07-05 12:37.

Giả định:

  • Bạn muốn bố cục lưới 4 cột với gói
  • Số lượng mục không nhất thiết phải là bội số của 4

Đặt lề trái cho mọi mục ngoại trừ mục 1, 5, 9, v.v.; và đặt chiều rộng cố định trên mỗi mục. Nếu lề trái là 10px thì mỗi hàng sẽ có lề 30px giữa 4 mục, chiều rộng phần trăm của mục có thể được tính như sau:

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

Đây là một giải pháp tốt cho các vấn đề liên quan đến hàng cuối cùng của flexbox.

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="flex">
  <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 class="item">6</div>
</div>
<div class="flex">
  <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 class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

1
aequalsb 2018-10-08 08:04.

Thực sự có một cách hay, gọn gàng, chỉ có CSS ​​để làm điều này (một cách có thể coi là "tốt hơn").

Trong số tất cả các câu trả lời được đăng ở đây, tôi chỉ tìm thấy một câu sử dụng thành công calc () (của Dariusz Sikorski). Nhưng khi đặt với: "nhưng không thành công nếu chỉ có 2 mục ở hàng cuối cùng" thì không có giải pháp nào được mở rộng.

Giải pháp này giải quyết câu hỏi của OP với một giải pháp thay thế cho tỷ suất lợi nhuận âm và giải quyết vấn đề đặt ra cho Dariusz.

ghi chú:

  • Ví dụ này chỉ trình bày bố cục 3 cột
  • Nó sử dụng calc()để cho phép trình duyệt thực hiện phép toán theo cách nó muốn - 100%/3 (mặc dù 33,333% cũng hoạt động tốt)(1em/3)*2 (mặc dù .66em cũng nên hoạt động tốt) .
  • Nó sử dụng ::afterđể đệm hàng cuối cùng nếu có ít phần tử hơn cột

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-container:after {
  content: "";
}
.flex-container > div,
.flex-container:after {
  box-sizing: border-box;
  width: calc((100%/3) - ((1em/3)*2));
}
.flex-container > :nth-child(n + 4) {
  margin-top: 1em;
}

/* the following is just to visualize the items */
.flex-container > div,
.flex-container:after {
  font-size: 2em;
}
.flex-container {
  margin-bottom:4em;
}
.flex-container > div {
  text-align: center;
  background-color: #aaa;
  padding: 1em;
}
.flex-container:after {
  border: 1px dashed red;
}
<h2>Example 1 (2 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
</div>

<h2>Example 2 (3 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Cũng tại https://codepen.io/anon/pen/rqWagE

0
jnmrobinson 2016-03-09 17:53.

Nó sẽ không hoạt động trong mọi trường hợp nhưng nếu bạn có độ rộng con linh hoạt (%) và biết số mục trên mỗi hàng, bạn có thể chỉ định rõ ràng lề của các phần tử cần thiết bằng cách sử dụng nth-childbộ chọn / s.

Nó phụ thuộc phần lớn vào những gì bạn có nghĩa là "tốt hơn". Cách này không yêu cầu đánh dấu trình bao bọc bổ sung cho các phần tử con hoặc phần tử phủ định - nhưng những thứ đó đều có vị trí của chúng.

section {
  display: block
  width: 100vw;
}
.container {
  align-content: flex-start;
  align-items: stretch;
  background-color: #ccc;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: 100%;
}

.child-item {
  background-color: #c00;
  margin-bottom: 2%;
  min-height: 5em;
  width: 32%;
}

.child-item:nth-child(3n-1) {
  margin-left: 2%;
  margin-right: 2%;
}
<html>
  <body>
      <div class="container">
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
      </div>
   </body>
</html>

0
Tunasing 2016-12-08 21:11.

Tôi đã gặp vấn đề tương tự trước đó, sau đó tình cờ tìm ra câu trả lời cho điều này. Hy vọng nó sẽ giúp những người khác tham khảo trong tương lai.

câu trả lời dài ngắn, thêm đường viền cho các mục linh hoạt của con bạn. thì bạn có thể chỉ định lề giữa các mục linh hoạt thành bất cứ thứ gì bạn muốn. Trong đoạn mã, tôi sử dụng màu đen cho mục đích minh họa, bạn có thể sử dụng 'trong suốt' nếu muốn.

#box {
  display: flex;
  width: 100px;
  /* margin: 0 -5px; *remove this*/
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  /* margin: 0 5px; *remove this*/
  border: 1px solid black; /* add this */
}
.item.special{ margin: 0 10px; }
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item special'></div>
</div>

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Tận dụng lợi thế của việc bán hàng nhân Ngày của Cha này

Tận dụng lợi thế của việc bán hàng nhân Ngày của Cha này

Màn hình Samsung Galaxy S9 Plus. Chủ nhật này là Ngày của Cha⁠ — trong trường hợp nó khiến bạn suy nghĩ — và thay vì mua cho anh ấy một chiếc cà vạt trong năm nay, có lẽ đã đến lúc bạn mua cho anh ấy thứ mà anh ấy sẽ thực sự sử dụng.

Assassin's Creed Snuck Into Monster Hunter: World Last Night

Assassin's Creed Snuck Into Monster Hunter: World Last Night

Monster Hunter: World yêu thích các sự kiện chéo. Dù có nghĩa là hóa trang thành Dante của Devil May Cry, giả dạng Horizon: Zero Dawn's Aloy, hay chiến đấu với quái vật Final Fantasy, các nhiệm vụ sự kiện khác nhau của Thế giới được nâng cấp tự do so với các trò chơi khác.

Ava DuVernay Có Quà Tặng Ngày Của Mẹ cho Tất Cả Chúng Ta: Nếp Nhăn Thời Gian Sẽ Được Viết Lại Vào Cuối Tuần Ngày Của Mẹ!

Ava DuVernay Có Quà Tặng Ngày Của Mẹ cho Tất Cả Chúng Ta: Nếp Nhăn Thời Gian Sẽ Được Viết Lại Vào Cuối Tuần Ngày Của Mẹ!

Storm Reid, Oprah Winfrey, Mindy Kaling, Reese Witherspoon và Ava DuVernay tại buổi chiếu đặc biệt của A Wrinkle in Time tại Nhà hát Walter Reade ở Thành phố New York vào ngày 7 tháng 3 năm 2018 “Ava rất mong được nói chuyện với bạn,” một trong những người của Array dư luận viên nói qua điện thoại. (Array là tập thể phân phối, nghệ thuật và vận động chính sách của Ava DuVernay tập trung vào các bộ phim của người da màu và phụ nữ.

Nhiệm vụ bất khả thi 5 sẽ khôi phục niềm tin của bạn trong phim hành động Tentpole

Nhiệm vụ bất khả thi 5 sẽ khôi phục niềm tin của bạn trong phim hành động Tentpole

Mission Impossible: Rogue Nation bắt đầu ở một cấp độ khác. Theo nghĩa đen.

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

McCain, người đang làm việc cho một album mới, lần đầu tiên bước vào vòng kết nối vào tối thứ Sáu ở Nashville

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Tôi viết như thế nào

Tôi viết như thế nào

Đối với tôi, mọi thứ là về dòng đầu tiên đó và nó sẽ đưa bạn đến đâu. Một số nhà văn bị điều khiển bởi cốt truyện, sự sắp xếp tinh tế của các quân cờ, trong khi những người khác bị lôi cuốn bởi một nhân vật và khả năng thực hiện một cuộc hành trình với một người bạn hư cấu mới.

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Language