Cara yang lebih baik untuk mengatur jarak antara flexbox item

Question

Lebih

Sumber Tidak AMP-versi Sunting

Cara yang lebih baik untuk mengatur jarak antara flexbox item

Untuk mengatur jarak minimal antara flexbox item I'm menggunakan margin: 0 5px on .item dan margin: 0 -5px pada wadah. Bagi saya tampaknya seperti hack, tapi saya dapat't menemukan cara yang lebih baik untuk melakukan hal ini.

[Contoh][1]

#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>

Salman A

Pertanyaan edit 3 Desember 2018 в 7:27

Pemrograman

css3 css flexbox

17 Desember 2013 в 5:35

329 tayangan

Mengomentari pertanyaan (12)

Roumelis George

Sumber Tidak AMP-versi Sunting

Ini bukan hack. Teknik yang sama juga digunakan oleh bootstrap dan grid, meskipun, bukan margin, bootstrap menggunakan padding untuk cols.

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}

175

0

Komentar (6)

Dariusz Sikorski

Sumber Tidak AMP-versi Sunting

flexbox dan css calc()

Halo, di bawah ini saya bekerja solusi untuk semua browser mendukung flexbox. Tidak ada margin negatif, tidak ada hacks, tidak ada penyelesaian, Css murni.

[Biola Demo][1]

<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

.flexbox { tampilan: flex; flex-arah: - turut; flex-bungkus: bungkus; membenarkan-content: ruang-antara; }

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

Alex Nolasco

Jawaban edit 24 September 2019 в 3:53

88

0

Komentar (5)

hexalys

Sumber Tidak AMP-versi Sunting

Anda dapat menggunakan transparan perbatasan.

Saya telah merenungkan masalah ini ketika mencoba untuk membangun sebuah flex grid model yang dapat mundur ke meja + meja-model sel untuk browser lama. Dan Perbatasan untuk kolom talang sepertinya saya yang terbaik sesuai pilihan. yaitu Meja-sel don't memiliki margin.

misalnya

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

Juga perhatikan bahwa anda perlu min-width: 50px; untuk flexbox. Flex model tidak akan menangani ukuran tetap kecuali anda melakukan flex: none; pada anak tertentu elemen yang anda inginkan sebagai tetap dan oleh karena itu dikecualikan dari menjadi "flexi". http://jsfiddle.net/GLpUp/4/ Tapi semua kolom bersama-sama dengan flex:none; tidak lagi flex model. Di sini adalah sesuatu yang lebih dekat ke model flex: http://jsfiddle.net/GLpUp/5/

Jadi anda benar-benar dapat menggunakan margin biasanya jika anda don't membutuhkan meja-sel mundur untuk browser lama. http://jsfiddle.net/GLpUp/3/

Pengaturan background-clip: padding-box; akan diperlukan ketika menggunakan latar belakang, karena kalau latar belakang akan mengalir ke dalam transparan daerah perbatasan.

88

0

Komentar (9)

weBBer

Sumber Tidak AMP-versi Sunting

Ini akan bekerja untuk semua kasus, bahkan jika ada beberapa baris atau jumlah elemen.

Kami menggunakan [tampilan: grid;]1 dan sifat-sifatnya.

#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>

Kelemahan dari metode ini adalah dalam Mobile Opera Mini tidak akan didukung dan di PC ini bekerja hanya setelah IE10.

Catatan untuk menyelesaikan browser kompatibilitas termasuk IE11 silakan gunakan Autoprefixer

LAMA MENJAWAB

Don't pikir itu adalah solusi,'s masih salah satu yang terbaik jika anda hanya ingin satu baris dari unsur-unsur dan itu akan bekerja dengan semua browser.

Metode ini digunakan oleh CSS saudara kombinasi, sehingga anda dapat memanipulasi banyak cara lain juga, tapi jika anda kombinasi yang salah dapat menyebabkan masalah juga.

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

Kode di bawah ini akan melakukan trik. Dalam metode ini, ada tidak perlu untuk memberikan margin: 0 -5px; ke #kotak wrapper.

Contoh untuk anda:

#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>

weBBer

Jawaban edit 31 Oktober 2019 в 5:25

64

0

Komentar (2)

Do Async

Sumber Tidak AMP-versi Sunting

Anda dapat menggunakan & > * + * sebagai pemilih untuk meniru flex-gap (untuk satu baris):

#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>

Jika anda perlu dukungan flex pembungkus, anda dapat menggunakan pembungkus elemen:

.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>

TylerH

Jawaban edit 21 Agustus 2019 в 1:09

40

0

Komentar (0)

Stickers

Sumber Tidak AMP-versi Sunting

Let's mengatakan jika anda ingin mengatur 10px ruang antara barang-barang, anda hanya dapat mengatur .item {margin-right:10px;} untuk semua, dan me-reset pada yang terakhir .item:last-child {margin-right:0;}

Anda juga dapat menggunakan general sibling ~ atau berikutnya + sibling selector untuk mengatur margin kiri pada item tidak termasuk yang pertama .item ~ .item {margin-left:10px;}, atau gunakan .item:tidak(:last-child) {margin-right: 10px;}

Flexbox begitu cerdas yang secara otomatis kalkulasi ulang dan sama-sama mendistribusikan grid.

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>

Jika anda ingin mengizinkan flex bungkus, lihat contoh berikut.

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>

23

0

Komentar (2)

Simon Epskamp

Sumber Tidak AMP-versi Sunting

Saya telah menemukan solusi yang didasarkan pada general sibling selector, ~, dan memungkinkan terbatas bersarang.

Lihat kode ini pen untuk contoh kerja

Pada dasarnya, dalam kolom kontainer, setiap anak yang didahului oleh anak lain mendapat margin atas. Demikian juga, dalam setiap baris wadah, setiap anak yang didahului oleh orang lain mendapat margin kiri.

.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>

TylerH

Jawaban edit 21 Agustus 2019 в 1:09

17

0

Komentar (2)

chris

Sumber Tidak AMP-versi Sunting

Beranjak dari sawa's jawaban, di sini's sedikit peningkatan versi yang memungkinkan anda untuk menetapkan jarak antara barang-barang tanpa marjin sekitarnya.

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

Juga termasuk adalah Safari "-webkit-flex" versi.

.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

0

Komentar (1)

Tim

Sumber Tidak AMP-versi Sunting

A flex container dengan -x (negatif) margin dan flex item dengan x (positif) margin atau padding kedua menyebabkan visual yang diinginkan hasil: Flex item memiliki tetap kesenjangan 2x hanya antara satu sama lain.

Tampaknya hanya masalah preferensi, apakah akan menggunakan margin atau padding di bagian flex item.

Dalam contoh ini, flex item skala dinamis dalam rangka untuk melestarikan kesenjangan tetap:

.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

0

Komentar (3)

Veiko Jääger

Sumber Tidak AMP-versi Sunting

Saya telah menggunakan ini untuk dibungkus dan tetap lebar kolom. Kuncinya di sini adalah calc()

SCSS sampel

$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});}

}

Full Codepen sampel

9

0

Komentar (3)

o-t-w

Sumber Tidak AMP-versi Sunting

Akhirnya mereka akan menambahkan gap properti untuk flexbox. Sampai maka anda bisa menggunakan CSS grid, bukan yang sudah memiliki gap property, dan hanya memiliki satu baris. Lebih bagus daripada berurusan dengan margin.

8

0

Komentar (1)

Michael_B

Sumber Tidak AMP-versi Sunting

Dengan flexbox, menciptakan talang adalah nyeri, terutama ketika pembungkus yang terlibat.

Anda perlu menggunakan margin negatif (seperti yang ditunjukkan dalam pertanyaan):

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

... atau mengubah HTML (seperti yang ditunjukkan pada jawaban lain):

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

... atau sesuatu yang lain.

Dalam hal apapun, anda perlu jelek hack untuk membuatnya bekerja karena flexbox doesn't memberikan "flex-gap" fitur (setidaknya untuk saat ini).

Masalah talang, bagaimanapun, adalah sederhana dan mudah dengan CSS Grid Layout.

Grid spec memberikan sifat yang membuat ruang antara grid item, sementara mengabaikan ruang antara barang dan kontainer. Sifat-sifat ini adalah:

grid-column-gap
grid baris-gap
grid-gap (singkatan untuk kedua sifat di atas)

Baru-baru ini, spec telah diperbarui agar sesuai dengan CSS Box Modul Keselarasan, yang menyediakan satu set keselarasan sifat untuk digunakan di semua kotak model. Jadi sifat yang sekarang:

kolom celah
baris-gap
gap (singkatan)

Namun, tidak semua Jaringan-mendukung browser mendukung properti baru, jadi saya'll gunakan versi asli dalam demo di bawah ini.

Juga, jika jarak yang dibutuhkan antara barang dan kontainer, padding pada wadah bekerja dengan baik (lihat contoh ketiga dalam demo di bawah ini).

Dari spec:

10.1. Talang: the baris-gap, column-gap, dan gap sifat-sifat

baris-gap dan kolom-gap properties (dan mereka gap singkatan), ketika ditetapkan pada grid wadah, menentukan talang antara grid baris dan kolom grid. Mereka sintaks yang didefinisikan di CSS Kotak Alignment 3 §8 Kesenjangan Antara Kotak.

efek dari sifat ini adalah seolah-olah terkena garis grid diperoleh ketebalan: grid lintasan antara dua garis grid adalah ruang antara selokan yang mewakili mereka.

.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>

Informasi lebih lanjut:

5

0

Komentar (0)

iClusterDev

Sumber Tidak AMP-versi Sunting

Menggunakan Flexbox di solusi saya've digunakan membenarkan-content properti untuk elemen induk (wadah) dan I've ditentukan margin dalam flex-dasar properti dari item. Cek cuplikan kode di bawah ini:

.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>

4

0

Komentar (0)

MK10

Sumber Tidak AMP-versi Sunting

Berikut ini's solusi saya, yang doesn't memerlukan pengaturan setiap kelas pada anak-unsur:

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

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

Penggunaan:

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

Teknik yang sama dapat digunakan untuk normal flex baris dan kolom di samping inline contoh yang diberikan di atas, dan diperpanjang dengan kelas-kelas untuk jarak lain dari 4px.

4

0

Komentar (0)

tillsanders

Sumber Tidak AMP-versi Sunting

Mengapa tidak melakukannya seperti ini:

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

Ini menggunakan adjacent sibling selector, untuk memberikan semua .item unsur-unsur, kecuali yang pertama yang margin-left. Terima kasih untuk flexbox, ini hasil yang di sama-sama berbagai elemen. Ini juga bisa dilakukan dengan elemen diposisikan secara vertikal dan margin-top, tentu saja.

4

0

Komentar (1)

wutzebaer

Sumber Tidak AMP-versi Sunting

Saya sering menggunakan + operator untuk kasus seperti ini

#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

0

Komentar (0)

lukefrake

Sumber Tidak AMP-versi Sunting

Aku menemukan cara termudah untuk melakukan ini adalah dengan persentase dan hanya memungkinkan margin untuk menghitung sampai anda lebar

Ini berarti anda berakhir dengan sesuatu seperti ini jika di tempat anda menggunakan contoh

#box {
   display: flex;
}

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

Tidak berarti nilai-nilai anda didasarkan pada lebar meskipun yang mungkin tidak baik untuk semua orang.

2

0

Komentar (1)

Flimm

Sumber Tidak AMP-versi Sunting

CSS `gap` properti:

Ada yang baru gap CSS properti untuk multi-kolom, flexbox, dan grid layout yang bekerja di beberapa browser sekarang! (Lihat Bisa saya gunakan link 1; link 2).

#box {
  display: flex;
  width: 100px;
  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>

Seperti menulis, ini hanya bekerja pada Firefox sedih.

TylerH

Jawaban edit 22 Oktober 2019 в 2:52

2

0

Komentar (0)

zurfyx

Sumber Tidak AMP-versi Sunting

Columnify - solo kelas untuk N kolom

Flexbox dan SCSS

.columnify {
  display: flex;

  > * {
    flex: 1;

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

Flexbox dan 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>

Bermain dengan itu di [JSFiddle][1].

2

0

Komentar (0)

Pengguna anonim · Accepted Answer · 2013-12-18T08:31:54+00:00

Flexbox doesn't telah runtuh margin.
Flexbox doesn't memiliki sesuatu yang mirip dengan border-spacing untuk tabel (kecuali untuk CSS property gap yang isn't didukung dengan baik di sebagian besar browser, caniuse)

Oleh karena itu untuk mencapai apa yang anda minta adalah sedikit lebih sulit.

Dalam pengalaman saya, "terbersih" yang't menggunakan :first-child/:last-child dan bekerja tanpa modifikasi apapun pada flex-bungkus:bungkus adalah untuk mengatur padding:5px pada wadah dan margin:5px pada anak-anak. Yang akan menghasilkan 10px gap antara masing-masing anak-anak dan antara masing-masing anak-anak dan orang tua mereka.

[Demo](http://jsfiddle.net/7XD8s/)

.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>

Cara yang lebih baik untuk mengatur jarak antara flexbox item

flexbox dan css calc()

Ini akan bekerja untuk semua kasus, bahkan jika ada beberapa baris atau jumlah elemen.

LAMA MENJAWAB

CSS gap properti:

Columnify - solo kelas untuk N kolom

Flexbox dan SCSS

Flexbox dan CSS

CSS `gap` properti: