• Страница 1 из 1
  • 1
Модератор форума: ABC  
Форум » Cascading Style Sheets (CSS) » Верстка страниц с помощью CSS » Flexbox-вёрстка » Свойства flex-контейнера (Набор свойств для отображения в браузере)
Свойства flex-контейнера
ABCДата: Сб, 06.04.2019, 11:32 | Сообщение # 1
Offline
Для flex-контейнера есть определённые свойства, касающиеся только его. Основное из них, свойство display,благодаря которому мы и можем сделать нужный нам HTML-элемент flex-контейнером, прописав в CSS для этого элемента

Код
display: flex;


Элементы внутри flex-контейнера (иначе, flex-элементы) по умолчанию выстраиваются рядом друг с другом по горизонтали, будто ячейки в таблице.
И такое позиционирование будет оставаться всегда, независимо от размера окна браузера. Автоматического переноса элементов при малой ширине окна браузера не произойдёт, в какой-то момент даже может произойти выпадание контента из элементов, но они по-прежнему будут располагаться рядом в одной строке.

Но с помощью технологии flex вы можете управлять этими элементами, задавая, каким образом им располагаться и даже изменить порядок их вывода на странице.

Свойство flex-flow

позволяет выбрать направление, в котором будут отображаться элементы, а также дать команду переносить или нет элементы на новую строку при значении row, или в новую колонку при значении column.
Делается это так:

Код
.container {
display: flex;
flex-flow: column-reverse nowrap;
}



Свойство flex-flow состоит из двух CSS-свойств: flex-direction и flex-wrap.
Запись:
Код
flex-flow: row wrap;

аналогична коду:
Код
flex-direction: row;
flex-wrap: wrap;



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

Для управления направлением отображения flex-элементов существует несколько значений:

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

row-reverse - всё тоже, только наоборот, последний элемент HTML-кода отображается в крайнем левом положении, а первый справа.



column - отображает flex-элементы друг над другом (как в обычном порядке расположения элементов div в потоке). Это значение может пригодиться при отображении элементов для мобильной версии, когда размер окна браузера не позволяет корректно отображать элементы в строку.

column-reverse - похоже на предыдущее значение,с той лишь разницей, что объекты, которые в HTML-коде расположены последними, на странице будут выводиться первыми.



Для управления переносом flex-элементов в контейнере на новую строку или в новую колонку есть три возможных значения:

nowrap - значение по умолчанию, при котором элементы будут располагаться один за другим в строку без переноса, сколь бы малым ни было окно браузера по ширине.
Если же при этом будет установлено значение column, элементы будут располагаться друг над другом.

wrap - если элементы в контейнере не помещаются по ширине, благодаря этому значению они будут переноситься на новую строку или в новую колонку (в зависимости от направления их вывода на странице).
При этом также необходимо задействовать некоторые свойства flex-элементов.

wrap-reverse - работает аналогично wrap, но при этом элементы переносятся в обратном порядке.
Прикрепления: 0425332.jpg(135.1 Kb) · 4360586.jpg(157.0 Kb)
 
профиль цитата изменить удалить
ABCДата: Сб, 06.04.2019, 13:59 | Сообщение # 2
Offline
Свойство justify-content

Данное свойство позволяет равномерно распределить flex-элементы внутри flex-контейнера в строку в том случае, если известна ширина всех элементов и она в сумме меньше ширины flex-контейнера.

Для того, чтобы это свойство использовать, его добавляют в CSS-стили для flex-контейнера. При этом не нужно забывать, что для flex-элементов контейнера должна быть указана их ширина. В качестве примера:

HTML

Код
<div class="container">
<div>Первый flex-элемент</div>
<div>Второй flex-элемент</div>
<div>Третий flex-элемент</div>
</div>


CSS

Код
.container {
display: flex;
justify-content: space-around;
}
.container div {
width: 200px;
}


У данного свойства есть несколько значений:

flex-start - элементы выравниваются по левому краю (при этом, если значение flex-flow будет равным row-reverse, то элементы выравниваются по правому краю) демо

flex-end - элементы выравниваются по правому краю (и опять же, если для flex-flow будет указано значение row-reverse, выравнивание будет по левому краю) демо

center - элементы выравниваются по центру контейнера
демо

space-between - первый и последний элементы располагаются у левого и правого края строки соответственно, остальные элементы располагаются равномерно с одинаковыми промежутками между ними. (Отличное решение для панели навигации!) демо

space-around - между всеми элементами в контейнера устанавливается одинаковое расстояние, которое добавляется, в том числе, и для первого и последнего элемента слева и справа соответственно. демо

Прикрепления: 2964008.png(32.2 Kb)
 
профиль цитата изменить удалить
ABCДата: Сб, 06.04.2019, 15:58 | Сообщение # 3
Offline
Свойство align-items

Данное свойство применяется к flex-контейнеру для выравнивания flex-элементов различной высоты в контейнере по высоте строки.

Например, внутри flex-контейнера с классом "container" есть три блока div с разным количеством контента:

Код
<div class="container">
<div>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала
XVI века.
</div>
<div>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала
XVI века. В то время некий безымянный печатник создал большую коллекцию
размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но
и перешагнул в электронный дизайн.
</div>
<div>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала
XVI века. В то время некий безымянный печатник создал большую коллекцию
размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но
и перешагнул в электронный дизайн. Его популяризации в новое время
послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах
и, в более недавнее время, программы электронной вёрстки типа Aldus
PageMaker, в шаблонах которых используется Lorem Ipsum.
</div>


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

flex-start - данное значение выравнивает верхний край всех элементов по верхнему краю контейнера. При этом элементы автоматически не будут растягиваться на всю высоту родительского контейнера. Их высота будет зависеть от их содержимого.демо

flex-end - выравнивает нижний край flex-элементов по нижнему краю. При этом элементы автоматически не будут растягиваться на всю высоту родительского элемента. Их высота будет зависеть от их содержимого. демо

center - вертикальные центры всех flex-элементов во flex-контейнере будут выравниваться по его вертикальному центру. демо

baseline — выравнивает базовые линии всех flex-элементов по базовой линии первого элемента. демо

stretch - значение по умолчанию, при котором все flex-элементы в контейнере растягиваются по высоте контейнера,в итоге высота всех элементов в контейнере одинаковая демо

Если для flex-контейнера для свойства flex-direction установлено значение column, то свойство align-items будет определять позиции flex-элементов уже не по вертикали, а по горизонтали, при этом они будут располагаться друг за другом и иметь разную ширину.
 
профиль цитата изменить удалить
ABCДата: Сб, 06.04.2019, 22:36 | Сообщение # 4
Offline
Свойство align-content

Свойство применяется для flex-контейнера.

Данное свойство отвечает за размещение во flex-контейнере flex-элементов, в том случае если они занимают несколько строк.
В этом случае для flex-контейнера в CSS-стилях должно быть указано значение wrap, а сам flex-контейнер по высоте должен быть выше, чем строки его элементов.

Другими словами, во flex-контейнере должно быть свободное пространство по вертикали, и оно должно быть больше суммы всех высот строк его элементов.

У свойства align-content также есть несколько значений:

flex-start - строки flex-элементов помещаются у верхнего края контейнера. Посмотрите демо

flex-end - строки flex-элементов помещаются у нижнего края контейнера. Смотрите демо

center - центры всех строк выравниваются по вертикальному центру контейнера. Смотрим демо

space-between - верхняя строка располагается у верхнего края контейнера, нижняя - у нижнего края, между остальными строками равные промежутки по вертикали. Смотрим демо

space-around - между всеми строками равные промежутки по вертикали, в том числе по верхнему и нижнему краям крайних строк в контейнере. демо

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

На всех демо-страницах нужно уменьшить ширину окна браузера, чтобы произошёл перенос строк в контейнере.
 
профиль цитата изменить удалить
Форум » Cascading Style Sheets (CSS) » Верстка страниц с помощью CSS » Flexbox-вёрстка » Свойства flex-контейнера (Набор свойств для отображения в браузере)
  • Страница 1 из 1
  • 1
Поиск: