CSS приклад: min-width

Мінімальна ширина (min-width) в CSS

Властивість min-width установлює мінімальну ширину елемента. Якщо ширина вікна браузера стає меншою за задану мінімальну ширину елемента, то ширина елемента залишається незмінною, а появляється горизонтальна полоса прокрутки.

Ширина елемента обчислюється залежно від значень властивостей width, max-width та min-width. Браузер керується вказаними стильовими властивостями, як показано в таблиці.

Значення min-width може бути вказане в пікселях (px), відсотках (%) або успадковуватися від батьківського елемента.

Приклад

<!DOCTYPE html>
<html>
 <head>
  <style>
   #container {
    min-width: 420px;
   }
   #col1 {
    width: 150px;
   }
   #col2 {
    width: 250px;
   }
  </style>
 </head>
 <body>
  <div id="container">
   <div id="col1">Колонка 1</div>
   <div id="col2">Колонка 2</div>
  </div>
 </body>
</html>

Мінімальна ширина елемента допомагає контролювати відображення вмісту на сторінці відповідно до поточних розмірів вікна браузера.

Розміри

Часті запитання

  • Q: Як використовувати min-width в CSS?

    A: Мінімальна ширина елемента встановлюється за допомогою властивості min-width. Наприклад: div { min-width: 200px; }

  • Q: Де використовують min-width в CSS?

    A: min-width часто використовується для встановлення мінімальної ширини контейнера або блоку, щоб уникнути його зміни розміру нижче вказаного значення.

  • Q: Чи можна використовувати min-width разом з max-width в CSS?

    A: Так, min-width і max-width можна використовувати разом для встановлення діапазону ширини елемента. Наприклад: div { min-width: 200px; max-width: 500px; }

  • Q: Як min-width впливає на адаптивний дизайн?

    A: Встановлення min-width дозволяє контролювати мінімальну ширину елемента під час зміни розміру вікна браузера, що допомагає забезпечити коректне відображення контенту на різних пристроях.

  • Q: Як використовувати min-width для текстового блоку?

    A: min-width може бути застосований до текстового блоку, щоб встановити мінімальну ширину тексту та уникнути його обрізання при зміні розміру екрану. Наприклад: p { min-width: 300px; }