Уроки CSS 28

Здравствуйте, дорогие читатели, я Ферди Сефа Дюзгюн, сегодня мы продолжим с вами уроки css.

Flex

Сегодня мы посмотрим, как создать макет страницы в css и, наконец, сможем приступить к проектированию веб-страниц.

Это свойство используется для управления расположением и выравниванием элементов в пределах заданного поля. Используя CSS Flexbox, можно расположить элементы на странице горизонтально или вертикально. Flexbox позволяет задавать ширину, высоту, расстояние между элементами и их выравнивание. Он также позволяет изменять порядок элементов.

display: flex;

Если мы наделяем этим свойством контейнер (div), то элементы сортируются рядом, но если внутри контейнера есть другой контейнер, то он не мешает элементам внутри него.

display: inline-flex;

Это свойство отличается от flex так же, как block и inline-block. Если мы придадим inline-flex нашему контейнеру, он будет вести себя как инлайн-элемент.

Контейнер сортируется не только горизонтально. Он выглядит так, потому что по умолчанию он горизонтальный, и мы не меняем его.

                display: flex;
                flex-direction: row;

Приведенная выше функция является функцией по умолчанию, и вывод выглядит следующим образом.

Теперь давайте расположим его горизонтально:

                display: flex;
                flex-direction: column;

Они сформированы в соответствии с размером страницы.

Теперь давайте отсортируем их по горизонтали вверх ногами.

                display: flex;
                flex-direction: row-reverse;

Теперь выстроим их вертикально вверх ногами.

                display: flex;
                flex-direction: column-reverse;

Сжатие по умолчанию :

            .container{
                display: flex;
                width: 250px;
                flex-wrap: nowrap; /* default - sıkıştırmaya çalışıyor */
            }

Сжатие в соответствии со значением родителя :

Обратное сжатие :

justify-content

Это свойство определяет, как элементы выравниваются в горизонтальной/вертикальной плоскости.

Justify-content: flex-start/center/flex-end/space-between/space-around/space-evenly;.

Мы можем обобщить их использование с помощью рисунка ниже.

                justify-content: flex-start;
                justify-content: flex-end;
                justify-content: center;
                justify-content: space-between;
                justify-content: space-around;
                justify-content: space-evenly;

Обычно его используют для регулировки в горизонтальной плоскости, но это было бы неправильно. В зависимости от использования flex-direction, корректировки также могут быть сделаны путем распределения по вертикали.

align-items

В CSS свойство align-items используется для управления вертикальным выравниванием набора элементов при определении их расположения. Это свойство определяет, как элемент выравнивается по высоте внутри своего родительского элемента.

                align-items: flex-start;
                align-items: flex-end;
                align-items: center;
                align-items: stretch;
                align-items: baseline;

Это можно лучше понять с помощью приведенных ниже изображений.

Baselane используется нечасто, а stretch - это значение, которое регулирует длину или ширину в зависимости от длины или ширины, это тоже используется нечасто, но знать полезно. Этого будет достаточно для понимания flex-start/end и center.

align-content

В CSS свойство align-content используется для управления выравниванием элементов в перпендикулярном направлении при определении расположения ряда элементов (более одного ряда). Это свойство определяет, как элемент выравнивается по высоте внутри своего родительского элемента.

                align-content: flex-start;
                align-content: flex-end;
                align-content: center;
                align-content: stretch;
                align-content: space-around;
                align-items: space-evenly;

Все, что мы узнали до сих пор - это свойства, которые даются контейнерам, а в другом уроке по флексу - это свойства, которые мы будем давать элементам во флексе.