Если я правильно понимаю вашу проблему, то странный пробел, от которого вы хотите избавиться, - это тот, который находится во втором ряду после того, как ваш первый ряд обернут. Если это все, что вы пытаетесь решить, то, возможно, все, что вам нужно сделать, - это перейти justify-contentс space-betweenна flex-startс добавлением поля для ваших .sectionэлементов и отступов в ваших #mainнастройках, чтобы соответствовать. Интервал теперь будет 20 пикселей между всеми изображениями.
#outer {
display: flex;
}
#main {
display: flex;
justify-content: center;
flex-wrap: wrap;
border: solid black 25px;
border-radius: 25px;
width: 450px;
height: 500px;
padding: 10px;
}
.section {
background-color: #ddd;
padding: 15px;
margin: 10px;
}
.label, .icon {
text-align: center;
}
<div id="outer">
<div id="main">
<div class="section">
<div class="label">Label 1AAAAAAAAAAA</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 1B</div>
</div>
<div class="section">
<div class="label">Label 2A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 2B</div>
</div>
<div class="section">
<div class="label">Label 3A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 3B</div>
</div>
<div class="section">
<div class="label">Label 4A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 4B</div>
</div>
<div class="section">
<div class="label">Label 5A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 5B</div>
</div>
</div>
</div>
Если вам не нравится , как это выглядит, вы можете попробовать другие justify-contentценности , такие как flex-start, flex-end, space-around, space-evenly.
Кроме того, вы можете избавиться justify-contentи использовать, flex-growчтобы расширить каждый, .sectionчтобы соответствовать его среде.
#outer {
display: flex;
}
#main {
display: flex;
flex-wrap: wrap;
border: solid black 25px;
border-radius: 25px;
width: 450px;
height: 500px;
padding: 10px;
}
.section {
background-color: #ddd;
padding: 15px;
margin: 10px;
flex-grow: 1;
}
.label, .icon {
text-align: center;
}
<div id="outer">
<div id="main">
<div class="section">
<div class="label">Label 1AAAAAAAAAAA</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 1B</div>
</div>
<div class="section">
<div class="label">Label 2A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 2B</div>
</div>
<div class="section">
<div class="label">Label 3A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 3B</div>
</div>
<div class="section">
<div class="label">Label 4A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 4B</div>
</div>
<div class="section">
<div class="label">Label 5A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 5B</div>
</div>
</div>
</div>
В качестве альтернативы, если вы хотите, чтобы их желоба выстроились в линию, при этом расширяясь, чтобы соответствовать .section содержимому элемента, вы можете попробовать использовать display: tableвместо этого.
Недостатком здесь является то, что вам нужно разделить HTML на строки.
#outer {
display: flex;
}
#main {
display: table;
flex-wrap: wrap;
border: solid black 25px;
border-radius: 25px;
width: 450px;
height: 500px;
border-collapse: separate;
border-spacing: 20px;
}
.row {
display: table-row;
}
.section {
display: table-cell;
background-color: #ddd;
padding: 15px;
}
.label, .icon {
text-align: center;
}
<div id="outer">
<div id="main">
<div class="row">
<div class="section">
<div class="label">Label 1AAAAAAAAAAA</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 1B</div>
</div>
<div class="section">
<div class="label">Label 2A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 2B</div>
</div>
<div class="section">
<div class="label">Label 3A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 3B</div>
</div>
</div>
<div class="row">
<div class="section">
<div class="label">Label 4A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 4B</div>
</div>
<div class="section">
<div class="label">Label 5A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 5B</div>
</div>
</div>
</div>
</div>
Если вы действительно хотите, чтобы все .sectionэлементы расширялись, чтобы они были равны наибольшему .sectionэлементу,
вам, скорее всего, понадобится использовать JavaScript, так как элементы одного уровня в CSS мало знают друг о друге.
Вы можете добавить следующий JavaScript на свою страницу и настроить CSS следующим образом:
function expandSectionsToLargest() {
// Grab all of the elements with "section" class names
var sectionElements = document.getElementsByClassName('section');
// Find the largest width among our section elements
var largestWidth = -Infinity;
Array.prototype.forEach.call(sectionElements, section => {
if (section.offsetWidth > largestWidth) {
largestWidth = section.offsetWidth;
}
});
// Set all of the sections to at least equal the largest width
Array.prototype.forEach.call(sectionElements, section => {
section.style.minWidth = largestWidth + 'px';
});
}
// Expand the section widths now (must be called after the section elements are loaded)
expandSectionsToLargest();
#outer {
display: block;
}
#main {
display: block;
border: solid black 25px;
border-radius: 25px;
width: 450px;
height: 500px;
padding: 10px;
}
.section {
background-color: #ddd;
box-sizing: border-box; /* Important to make the element's CSS width coincide with JavaScript's offsetWidth value */
padding: 15px;
margin: 10px;
float: left;
}
.label, .icon {
text-align: center;
}
<div id="outer">
<div id="main">
<div class="section">
<div class="label">Label 1AAAAAAAAAAA</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 1B</div>
</div>
<div class="section">
<div class="label">Label 2A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 2B</div>
</div>
<div class="section">
<div class="label">Label 3A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 3B</div>
</div>
<div class="section">
<div class="label">Label 4A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 4B</div>
</div>
<div class="section">
<div class="label">Label 5A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 5B</div>
</div>
</div>
</div>