Для встановлення мінімальної відстані між елементами flexbox я використовую margin: 0 5px
на .item
і margin: 0 -5px
на container. Для мене це схоже на хакерство, але кращого способу зробити це я не знайшов.
[Приклад][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
для таблиць (за винятком властивості CSS gap
, яка погано підтримується у більшості браузерів, caniuse)Тому досягти того, про що ви просите, трохи складніше.
З мого досвіду, найчистіший спосіб, який не використовує :first-child
/:last-child
і працює без будь-яких змін на flex-wrap:wrap
- це встановити padding:5px
для контейнера і margin:5px
для дочірніх елементів. Це створить проміжок 10px
між кожним дочірнім елементом і між кожним дочірнім елементом та їхнім батьком.
[Демонстрація](
).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>
Можна використовувати прозорі рамки.
Я розмірковував над цим питанням, намагаючись побудувати модель гнучкої сітки, яка може повернутися до моделі таблиць + таблиця-комірка для старих браузерів. І мені здалося, що найкращим відповідним вибором є Borders для жолобів стовпців, тобто табличні комірки не мають полів.
наприклад
.column{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid transparent;
}
Також зауважте, що вам потрібно min-width: 50px;
для flexbox. Модель flex не буде обробляти фіксовані розміри, якщо ви не зробите flex: none;
для конкретного дочірнього елемента, який ви хочете зробити фіксованим і, отже, виключити з "flexi"
.
flex:none;
- це вже не гнучка модель.
Ось щось ближче до гнучкої моделі: http://jsfiddle.net/GLpUp/5/
Таким чином, ви можете використовувати поля в звичайному режимі, якщо вам не потрібен запасний варіант table-cell для старих браузерів. http://jsfiddle.net/GLpUp/3/
Налаштування background-clip: padding-box;
буде необхідним при використанні фону, оскільки в іншому випадку фон буде перетікати в область прозорої межі.
Я вважаю, що найпростіший спосіб зробити це за допомогою відсотків і просто дозволити маржі підрахувати вашу ширину
Це означає, що ви отримаєте щось на зразок цього, якщо ви використовуєте свій приклад
#box {
display: flex;
}
.item {
flex: 1 1 23%;
margin: 0 1%;
}
Це означає, що ваші значення базуються на ширині, хоча це може бути не для всіх.