9

Есть пример верстки. При изменении размеров окна все, как и полагается, у тегов <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>

4
  • Можно попорбовать присобачить колонки...
    – Qwertiy
    15 мая 2017 в 20:44
  • 2
    А ширина блока как будет меняться на проекте? С помощью js или естественным образом. Если естественным образом, то можно попробовать сделать в с помощью calc() и медиа-выражений. 16 мая 2017 в 1:53
  • Естественным образом и с js. Пока просто js смотрит размер первой ссылки и всем ссылкам у которых ширина выше выставляется max-width равное ширине первой ссылки. Но это на мой взгляд совсем уж костыль. 17 мая 2017 в 6:19
  • 2
    Я думаю иначе не получится ровно до тех пор, пока css не сможет брать значения из родительского (или соседнего) селектора и использовать его. Пока что реально можно привязаться к размеру вьюпорта и использовать медиа-выражение. Больше просто не к чему привязывать. Ну или поискать решение в гридах, хотя они, вроде, не про это. 17 мая 2017 в 17:25

2 ответа 2

5
+50

То, чего вы хотите добиться средствами чистого 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;
}
<div class=grid>
  <div class=grid__item></div>
  <div class=grid__item></div>
  <div class=grid__item></div>
  <div class=grid__item></div>
  <div class=grid__item></div>
  <div class=grid__item></div>
  <div class=grid__item></div>
  <div class=grid__item></div>
  <div class=grid__item></div>
</div>

1
4

У вас ссылка имеет свойство 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;
4
  • 2
    Но они должны растягиваться. Он хочет чтобы в последней строке были той же ширины, но в полных строках растягивались.
    – Qwertiy
    12 мая 2017 в 15:32
  • Не то, @Qwertiy все правильно понял, а если добавить flex-grow: 0;, то они не будут тянутся, а ширина их будет по содержимому или не меньше 5em 13 мая 2017 в 22:48
  • Не понятно что вы хотите. На картинках четко указаны что блоки НЕ тянутся. То что в одном случае в ряду четыре в другом пять блоков, это говорит не о их растяжении (css не программный язык) а о том что вы четко указали сколько блоков в строке умещается. например задав им относительную ширину в calc(25% - margin). Если вы хотите что бы при разной ширине родительского блока блоки сами высчитывали оптимальное количество себя и размер то это только js. Обходные пути в цсс привязаты к жесткому количеству блоков в ширине. 14 мая 2017 в 18:13
  • 3
    При разной ширине родительского блока, блоки сами высчитывают оптимальное количество себя и размер, при данной разметке и без js. Но если блок переходит на следующую строку и он в ней один, то блок растягивается на все свободное место. И вот этот растянутый на всю строку блок и хочется сжать до размера всех остальных блоков, предшествующих ему. 14 мая 2017 в 18:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.