Flexbox öğeleri arasındaki minimum mesafeyi ayarlamak için .item' üzerinde
margin: 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>
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](
).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>
Ş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.
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.
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.