§ Стилове за структура (layout) в CSS

Построяването на layout в CSS e едно от основните умения, които всеки уеб програмист трябва да усвои. Съществуват няколко различни инструмента за имплементирането на различни по сложност позиционирания.

CSS float е едно от стиловите свойства, които се използва за позициониране на елементи в документа. Когато на елемент се зададе float, той се премества от своята обичайна позиция в документа и започва да се приближава към една от страните на контейнера, в който се намира. Така можете да подредим елементите в колони или редове.

CSS flexbox е друг инструмент, който позволява да се разпределят елементите в документа и да се контролира техният размер и подреждане. С помощта на flexbox можем да създаваме еластични разположения, които се променят автоматично в зависимост от размера на екрана и други параметри.

• display: flex - показва, че елемента ще използва flexbox.
• flex-direction: row - oпределя посоката, в която ще се разполагат елементите в контейнера. Ако използваме row, елементите ще се разполагат в редове отляво надясно, ако използвате column, те ще се разполагат в колони отгоре надолу.
• flex-wrap: wrap - това свойство определя дали елементите в контейнера ще се пренасят на нов ред или колона, когато не e възможно да се разположат на текущия ред или колона.
• justify-content: center - използва се за определяне на подравняването на елементите по хоризонталната ос. Ако използваме center, елементите ще бъдат подравнени по средата на контейнера
• align-items: center - използва се за определяне на подравняването на елементите по вертикалната ос във flexbox контейнера. Ако използваме center, елементите ще бъдат подравнени по средата на контейнера по вертикалната ос.

CSS grid е друг модел за позициониране в CSS, който позволява да създаваме сложни разпределения на елементи. С помощта на CSS grid можем да правим решетки, които дефинират разположението и размера на елементите, както и да контролираме интервалите между тях.

Основните CSS свойства, които се използват за работа със CSS grid са:

• display: grid - показва, че елемента ще използва CSS grid за разпределението на съдържанието му.
• grid-template-columns и grid-template-rows - използват се за дефиниране на размера и броя на колоните и редовете в grid-а.
• grid-gap - използва се за дефиниране на интервала между колоните и редовете.