⚙️ Что такое свойство flex-grow в CSS и зачем оно используется?

Свойство flex-grow определяет, как свободное пространство внутри контейнера делится между дочерними элементами.

Оно задаёт коэффициент роста: чем больше значение, тем больше элемент занимает места.

➡️ Пример:

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

<style>
  .container {
    display: flex;
    width: 300px;
    border: 1px solid #ccc;
  }
  .item {
    padding: 10px;
    color: white;
  }
  .item1 { flex-grow: 1; background: #007bff; }
  .item2 { flex-grow: 2; background: #28a745; }
  .item3 { flex-grow: 1; background: #dc3545; }
</style>

🗣 В этом примере у второго элемента flex-grow: 2, поэтому он занимает в два раза больше места, чем соседние блоки.

CodeBase | Frontend | #CSS

⚙️ Что такое свойство position: sticky в CSS и зачем оно используется?

position: sticky фиксирует элемент внутри его родителя, когда он достигает определённого положения при прокрутке.

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

➡️ Пример:

<div class="section">
  <h2 class="sticky-title">Заголовок</h2>
  <p>Контент...</p>
</div>

<style>
  .section {
    height: 1500px;
    padding: 20px;
  }

  .sticky-title {
    position: sticky;
    top: 0;
    background: white;
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
</style>

🗣 В этом примере заголовок "прилипает" к верхней части экрана при прокрутке, но только в пределах родительского блока .section.

CodeBase | Frontend | #CSS