CSS від А до Я: як використовувати значення auto в CSS

1

Від автора: Вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по роботі зі значенням auto.

A значить auto

Значення auto вкрай зручно для автоматичного підстроювання контенту на веб-сторінці. У даного значення безліч способів застосування. Його можна використовувати для зберігання контенту, що виходить за межі контейнера, як альтернативу clearfix, для збереження пропорцій зображень і навіть для центрування контенту на сторінці. З допомогою трьох простих порад я навчу вас все це робити.

Порада 1

Значення auto дуже корисно в тих випадках, коли контент виходить за межі контейнера. За допомогою властивості overflow: auto можна утримати контент всередині контейнера, але коли вміст перевищує розміри блоку, буде з’являтися смуга прокрутки.

.content-box {
width: 300px;
height: 300px;
border: 1px solid #cc3f85;
overflow: auto;
}

Видаліть в CodePen демо вище властивість overflow, і ви побачите, що стане з контентом, не влезающим в блок.

Порада 2

Властивість overflow: auto можна також використовувати замість clearfix’а. Дана властивість створює новий блоковий контекст форматування, у якому є свої обтікання, що запобігає контейнер від схлопування. У деяких випадках дана властивість працює навіть краще ніж overflow: hidden.

.container {
width: 600px;
border: 4px solid #9be22d;
overflow: auto;
}
.blue-box {
float: left;
width: 200px;
height: 200px;
background-color: #66d9ef;
}
.pink-box {
float: right;
width: 200px;
height: 200px;
background-color: #cc3f85;
}

Видаліть в демо вище властивість overflow, і блок схлопнется.

Порада 3

Значення auto можна використовувати для збереження співвідношення сторін зображень. Якщо вам необхідно змінити розмір зображення всередині контейнера, задайте ширину або висоту (по відношенню до контейнера), а друге значення встановіть auto. Так ви збережете пропорції зображення.

.image-holder {
width: 50%;
border: 1px solid;
}
img {
width: 40%;
height: auto;
}

Зменшіть розмір вікна браузера, щоб побачити, як зображення зберігає правильне співвідношення сторін у CodePen демо.