Що таке нормальний потік елементів на веб-сторінці

Коли ви додаєте будь-які елементи на веб-сторінку вони розташовуються в строго визначеної послідовності.

У цій замітці я хочу продемонструвати, що це за послідовність і як це працює.

Спочатку давайте розберемося, що означає нормальний потік для блокових елементів.

Візьмемо три блоки div, які у вихідному коді розташовуються послідовно один за іншим.

У підсумку, на веб-сторінці ці блоки будуть розташовуватися по вертикалі один над іншим і кожен з цих блоків займає весь доступний по ширині простір сторінки.

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

Нормальний потік - це позиція і розміри елементів на веб-сторінці, які вони мають за замовчуванням, коли до них не були присвоєно ніяких додаткових властивість CSS, які можуть змінити цей нормальний потік.

Тепер давайте подивимося, як відображаються рядкові елементи в нормальному потоці.

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

В цілому, така поведінка малих і блокових елементів і називається нормальним потоком.

Це поняття і поведінку елементів в нормальному потоці потрібно знати, тому що далі я буду розповідати про те, як це поведінка можна міняти.

Можливо, вам будуть цікаві мої навчальні курси по верстці веб-сайтів і роботі зі стилями CSS. Тоді, натисніть на посилання нижче, щоб дізнатися про них докладніше.