Урок "Створення веб-сайтів з використанням HTML. CSS"

CSS flex boxі інші властивості

Flex box

.container { display: flex;}Така властивість зробить блок флекс-контейнером: Таким чином можна елементи розмістити у рядок

Звичайна розмітка з бірюзовим контейнеромі різнокольоровими блоками:display: flex;У флекс-контейнера є дві осі. Голова (горизонтальна) і другорядна (вертикальна)

Розташування елементів вздовж головної осіЗ допомогою властивості justify-content можна розподіляти елементи вздовж головної осі. На малюнку зображений результат при justify-content: space-between;justify-content: space-between; - рівномірно по всій шириніjustify-content: start; - на початкуjustify-content: end; - в кінці контейнераjustify-content: center; - по центру

Розташування елементів вздовж другорядної осіЗ допомогою властивості align-items можна розподіляти елементи вздовж головної осі. На малюнку зображений результат при align-items: center;align-items: center; - по серединіalign-items: start; - зверхуalign-items: end; - знизу. Всі блоки знаходяться по середині вздовж вертикалі

ГраниціЗ допомогою властивості border можна задавати блокам границі border: 3px solid blue; – на малюнку. Ширина границі у пікселях. Тип границі:solid - суцільна лініяdashed - пунктирна лінія. Колір границі

Заокруглення кутівborder-radius: 20px;