Продолжение статьи Флексбоксы в CSS 🙃

В элементе flexbox есть 6 основных свойств

  1. Flexbox-расти
  2. Flexbox-термоусадочная
  3. Flexbox-упаковка
  4. Flexbox-направление
  5. Flexbox-основа
  6. Flexbox-поток

В этой статье мы собираемся обсудить первые три из приведенного выше списка.

Вот так…

1. Свойство Flex Grow

В прошлой статье я продемонстрировал основы работы с flexbox. Итак, вы можете видеть, что в контейнере осталось много места.

Это неподходящий способ.

Итак, давайте увеличим эти элементы, чтобы получить оставшееся место в контейнере.

Мы можем сделать это с помощью свойства «flex-grow».

Здесь все, что нам нужно сделать, это зайти в .box в файле CSS, сказать flex-grow и установить его равным 1.

.box{
  height:100px;
  min-width: 100px;
  flex-grow: 1;
}

Теперь происходит то, что каждый элемент растет со скоростью 1, и все они растут и получают одинаковую скорость, чтобы занять все доступное место в контейнере.

Если мы установим 100, он также даст такой же результат. Причина в том, что это похоже на темп роста, и здесь мы дали всем коробкам одинаковый темп роста. Таким образом, все они вырастают до одних и тех же размеров.

Если мы удалим flex-grow из .box и дадим flex-grow элементам по отдельности, это даст другой рост гибкого ядра.

.box{
  height:100px;
  min-width: 100px;
}
.one{
  background-color: rgb(220, 139, 231);
  flex-grow: 1;
}
.two{
  background-color: rgb(219, 103, 213);
  flex-grow: 2;
}
.three{
  background-color: rgb(113, 0, 128);
  flex-grow: 3;
}

Вот оно, в браузере…

Мы используем flex-grow для расширения элементов в доступное пространство, и скорость, с которой они расширяются в это пространство, определяется числом, которое нам дается, когда мы задаем разные скорости, они достигают разной ширины.

2. Гибкая термоусадка

Это противоположность гибкого роста.

Здесь вместо того, чтобы определять скорость их роста, мы собираемся оценить, с какой они уменьшаются по мере того, как браузер становится меньше.

И, кстати, все эти гибкие элементы будут уменьшаться пропорционально друг другу с одинаковой скоростью.

Когда мы устанавливаем flex-shrink на 1, он сжимает каждый элемент в той же пропорции.

.box{
  height:100px;
  flex-grow: 1;
  flex-shrink: 1;
}

Браузер отображает это так.

Итак, мы можем установить разную скорость для каждого свойства flex-shrink для каждого из этих элементов, чтобы сжимать их с разной скоростью.

.box{
  height:100px;
  width:320px;
  }
.one{
  background-color: rgb(220, 139, 231);
  flex-shrink: 1;
}
.two{
  background-color: rgb(219, 103, 213);
  flex-shrink: 4;
}
.three{
  background-color: rgb(113, 0, 128);
  flex-shrink: 8;
}

По мере того, как браузер становится меньше, он начинает сжиматься с разной скоростью. Элемент «Тройка» имеет самую высокую степень усадки. Таким образом, он сжимается сравнительно больше, когда сжимается браузер.

3. Флекс-пленка

Это поведение flex по умолчанию.

Если элемент достигает точки, в которой он больше не сжимается, поскольку мы указали минимальную ширину. Итак, он уходит с веб-страницы.

Вот тут-то и пригодится гибкая пленка.

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

Шаги .., поэтому перейдите к контейнеру, и мы применим свойство flex-wrap для управления упаковкой этих элементов.

.flex-container{
  display: flex;
  flex-wrap: wrap;
}
.box{
  height:100px;
  min-width:200px;
  flex-grow: 1;
}

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

Посмотрите гибкую оболочку в браузере…

У нас могут быть разные значения для этого свойства: flex-wrap: reverse; или flex- wrap: nowrap;

💡 Flex-wrap: накрутка-реверс;

Это сделает план, противоположный обертыванию. Вместо перехода к следующей строке он переходит к предыдущей строке.

.flex-container{
  display: flex;
  flex-wrap: wrap-reverse;
}

💡 Flex-wrap: nowrap;

Это поведение по умолчанию, как будто у нас вообще нет этого свойства, поэтому нам нужно прокрутить, чтобы увидеть остальное.

.flex-container{
  display: flex;
  flex-wrap: nowrap;
}

Я думаю, что эти свойства будут вам очень полезны в адаптивной веб-разработке. Итак, следующие три свойства мы обсудим в следующей статье.

Итак, читатели, аплодируйте и следите за обновлениями… 🙃