Ширина дочерних элементов flexbox

#css #css3 #flexbox #css_grid

Есть пример верстки. При изменении размеров окна все, как и полагается, у тегов 
изменяется ширина и меняется их количество на строке.

Но если в последней строке элементов  меньше, чем в предыдущих строках, то данные
элементы растягиваются. 

Возможно ли сделать так, чтобы в последней строке ширина  соответствовала элементам
из предыдущих строк. 

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;
}



  

    

      1
      2
      3
      4
      5
    
  




    

Ответы

Ответ 1

То, чего вы хотите добиться средствами чистого CSS, возможно, но флексбокс тут не
поможет, потому что он одномерный и для полноценной сетки не годится. Воспользуйтесь
для этого display: grid, а браузерам, которые не поддерживают, подсуньте ваше JS-решение.

Вот небольшой пример сетки, не нужны даже медиа-выражения (разверните на весь экран
и подвигайте край браузера):



.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px 10px;
  background-color: black;
}

.grid__item {
  background-color: red;
  height: 40px;
}

  

  

  

  

  

  

  

  

  




Ответ 2

У вас ссылка имеет свойство flex: 1, что говорит о том что блок будет растянут или
ужат как только позволяет место.

flex: 1; => flex: 1 1 auto; 


по спецификации это 

flex: flex-grow flex-shrink  flex-basis;


Если flex-grow равен 1, то он позволяет блоку растягиваться как угодно. 0 - запрещает.
Тоже и для flex-shrink только он отвечает за сжатие блока. 
flex-basis это ширина по умолчанию в зависимости от настроек.

Вам  достаточно добавить в ссылку это свойство:

flex-grow: 0;