Flexbox öğeleri arasındaki mesafeyi ayarlamanın daha iyi bir yolu

Flexbox öğeleri arasındaki minimum mesafeyi ayarlamak için .item' üzerindemargin: 0 5px' ve container üzerinde `margin: 0 -5px' kullanıyorum. Benim için bir hack gibi görünüyor, ancak bunu yapmanın daha iyi bir yolunu bulamıyorum.

[Örnek][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
Edited question 2018ösp27ös19 Aralık 2018 в 7:27
Programlama
css3 css flexbox
2013ööp35öö5 Aralık 2013 в 5:35
35 görünümler
Çözüm
  • Flexbox'ın daralan kenar boşlukları yoktur.
  • Flexbox, tablolar için border-spacing benzeri bir şeye sahip değildir (çoğu tarayıcıda iyi desteklenmeyen CSS özelliği gap hariç, caniuse)

Bu nedenle istediğiniz şeyi elde etmek biraz daha zordur.

Deneyimlerime göre, :first-child/:last-child kullanmayan ve flex-wrap:wrap üzerinde herhangi bir değişiklik yapmadan çalışan "en temiz" yol, kapsayıcı üzerinde padding:5px ve çocuklar üzerinde margin:5px ayarlamaktır. Bu, her bir çocuk arasında ve her bir çocuk ile ebeveynleri arasında 10px boşluk üretecektir.

[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>
Flimm
Edited answer 2019ösp42ös15 Eylül 2019 в 3:42
Yorumlar (9)

Şeffaf kenarlıklar kullanabilirsiniz.

Eski tarayıcılar için tablolar + tablo hücresi modeline geri dönebilen bir esnek ızgara modeli oluşturmaya çalışırken bu konuyu düşündüm. Ve sütun olukları için kenarlıklar bana en uygun seçim gibi göründü. yani Tablo hücrelerinin kenar boşlukları yok.

Örneğin.

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

Ayrıca flexbox için min-width: 50px; değerine ihtiyacınız olduğunu unutmayın. Sabit olmasını istediğiniz ve bu nedenle "flexi" olmaktan çıkarılan belirli alt öğe üzerinde flex: none; yapmadığınız sürece flex modeli sabit boyutları işlemeyecektir. http://jsfiddle.net/GLpUp/4/ Ancak flex:none; ile birlikte tüm sütunlar artık bir flex modeli değildir. İşte flex modeline daha yakın bir şey: http://jsfiddle.net/GLpUp/5/

Bu nedenle, eski tarayıcılar için tablo-hücre geri dönüşüne ihtiyacınız yoksa aslında kenar boşluklarını normal şekilde kullanabilirsiniz. http://jsfiddle.net/GLpUp/3/

Arka plan kullanırken background-clip: padding-box; ayarı gerekli olacaktır, aksi takdirde arka plan şeffaf kenarlık alanına akacaktır.

Tracker1
Edited answer 2017ösp3ös23 Mart 2017 в 11:03
Yorumlar (9)

Bunu yapmanın en kolay yolunun yüzdeler olduğunu ve kenar boşluğunun genişliğinizi toplamasına izin vermek olduğunu düşünüyorum

Bu, örneğinizi kullandığınızda şöyle bir şey elde edeceğiniz anlamına gelir

#box {
   display: flex;
}

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

Değerlerinizin genişliğe dayalı olduğu anlamına gelir, ancak bu herkes için iyi olmayabilir.

Yorumlar (1)