Есть пример верстки. При изменении размеров окна все, как и полагается, у тегов <a>
изменяется ширина и меняется их количество на строке.
Но если в последней строке элементов <a>
меньше, чем в предыдущих строках, то данные элементы растягиваются.
Возможно ли сделать так, чтобы в последней строке ширина <a>
соответствовала элементам из предыдущих строк.
P.S. Для наглядности. Сейчас, как на красных блоках, a хотелось бы как на зеленых
P.S.S С помощью JS как это сделать знаю, интересует именно СSS.
B.addEventListener("click", add);
C.addEventListener("click", take);
function add() {
A.style.width = A.offsetWidth + 50 + "px";
}
function take() {
A.style.width = (A.offsetWidth - 50) + "px";
}
.work {
display: flex;
min-width: 67.5em;
max-width: 96em;
min-height: 55em;
/*-----*/
font-size: 4px;
padding: 3.75em;
background-color: hsla(0, 0%, 100%, 0.7);
box-sizing: border-box;
}
.faculty {
display: block;
/*-----*/
background-color: #F0E68C;
}
.container_link {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
a {
min-width: 5em;
flex: 1;
display: block;
/*-----*/
font-size: 2.25em;
margin: 1.3em 0.5em 0;
background-color: hsla(0, 0%, 90%, 1);
text-decoration: none;
border: 1px dashed #3B8686;
padding: 0.83em;
}
<button id="B">+ Width khaki</button>
<button id="C">- Width khaki</button>
<div id="A" class="work">
<div class="faculty" id="GF">
<div class="container_link">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
</div>
</div>
max-width
равное ширине первой ссылки. Но это на мой взгляд совсем уж костыль.