Как сделать элементы в колонку css
Перейти к содержимому

Как сделать элементы в колонку css

  • автор:

Размещение флекс элементов в ряд или колонку в CSS

Сейчас мы начнем изучать продвинутые вещи для работы с флекс элементами. Для начала давайте рассмотрим специальное свойство flex-direction , которое регулирует то, как выстраиваются наши блоки. По умолчанию оно имеет значение row , поэтому элементы выстраиваются в ряд. Давайте рассмотрим в следующих уроках, какие еще есть значения у этого свойства.

Повторите страницу по данному образцу:

Трепачёв Дмитрий © 2012-2024
t.me/trepachev_dmitry

#2 Flexbox CSS

Flexbox CSS

Flexbox CSS — направление осей и многострочность

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

Посмотреть видео — 2# Видео-урок по flexbox CSS

Свойство flex-direction (направление Осей)

Начинаем со свойства flex-direction , оно позволяет изменить порядок направление flex-элементов выводить их как в строчном расположении, так и в колоночном виде. Свойство задается для контейнера и принимает четыре значения.

flex-direction: row — значение установленное по умолчанию, расположение элементов начинается с лева на право.

Направление осей

flex-direction: row;

flex-direction: row-reverse – меняет порядок элементов, по мимо того что они прижимаются к правому краю блока, их порядок начинается с права на лево.

Flexbox направление осей

flex-direction: row-reverse;

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

Всего их две, есть основная ось , которую называют «Главная», и вторая ось «Поперечная», которая идет поперек главной оси.

У каждой из осей есть две составляющие, это начало ее, и конец.

flexbox оси

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

свойство flex-direction

При помощи значение row-reverse , мы переворачиваем главную ось, тем самым меняем направлении ее в нутрии контейнера, все, что было насажено на шампур, соответственно переворачивается вместе с ним. Но обратите внимание, как был элемент «1» в начале оси, так он в начале оси и остался, только теперь ось начинает не с начала, а с его конца.

flex-direction направление осей

Свойства из предыдущего урока justify-content , при помощи которого выравнивали элементы по горизонтали, в данном случае будет работать противоположно. Установим значение center , элементы выравниваются, как и положено посередине контейнера, а вот значение flex-start элементы прижимает к правой стороне, в тоже время flex-end позиционирует элементы в начале контейнера. Обязательно этот момент запомните при использовании flexbox .

flex-direction: column , применяется к поперечной оси и работает так же как row , только в отличие от него, все элементы в контейнере выстраивает в колонку сверху в низ.

Поперечная ось

flex-direction: column;

flex-direction:column-reverse , по аналогии работает как row-reverse , только теперь переворачивает поперечную ось, и порядок элементов в данном случае идет снизу вверх.

Поперечная ось

flex-direction: column-reverse;

Свойство flex-wrap – (многострочность элементов)

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

Свойство применяется к контейнеру и принимает всего три значения.

flex-wrap: nowrap , значение по умолчанию, flex-элементы не переносятся, располагаются в одну линию или колонку, то есть то что видим сейчас.

nowrap, значение по умолчанию

flex-wrap: nowrap;

flex-wrap: wrap , создает как многострочность так и многоколоночность элементов, и это зависит от того установлено ли значение column или column-reverse в свойстве flex-direction . Если мы закомментируем данное свойство, то соответственно по умолчанию оно принимает значение row , а значит, все элементы выстроятся в рад с лева на право, и занимают свое стандартное положение. Теперь сжимая область контейнера по ширине, элементы, которые в него не влезают, будут переноситься на следующий ряд.

многострочность элементов

flex-wrap: wrap;

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

формирование колонок

height: 150px; flex-direction: column-reverse;

flex-wrap: wrap-reverse , располагает все элементы в обратном порядке слева на права, при этом перенос происходит снизу вверх.

располагает все элементы в обратном порядке слева на права

flex-wrap: wrap-reverse;

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

Перейти к примеру — Смотреть пример

Как вывести элементы в столбик грамотно?

3b8c779d03214b7e90ce65ddbcccf1e0.png

На сайте есть такой вот список категорий. Категории расположены по алфавиту по горизонтали.
Схема такая
а а а а б б б в в в г г г
д д д е е е ж ж ж з з з

Необходимо эти категории вывести по алфавиту по вертикали. Схема такая
а в д з
а г е з
а д е и
б д ж и
Как вы реализовываете такой вывод. Можно ли использовать флексбоксы для такой сортировки, либо нужно сортировать на стороне сервера и выводить уже подготовленный массив категорий?

  • Вопрос задан более трёх лет назад
  • 14652 просмотра

Комментировать

Решения вопроса 1

gogolinsky

Павел Гоголинский @gogolinsky Автор вопроса

Сделал с помощью CSS

display: flex; flex-flow: column wrap;

Ответ написан более трёх лет назад

Вложенные флекс-контейнеры

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

В данном примере мы применяем display: flex одновременно к внешнему контейнеру и к красному флекс-элементу. Но с красным флекс-элементом мы используем flex-direction: column , в результате чего его флекс-элементы располагаются вертикально друг под другом. Значением по умолчанию для flex-direction является row , поэтому мы не стали использовать это свойство для внешнего контейнера — по умолчанию флекс-элементы располагаются в ряд.

Двумерные макеты сайтов

Когда мы разбирали пример макета Святого Грааля, то использовали флексбоксы только для средней части, а шапку и подвал оставили блочными элементами. Мы применяли флексбоксы для размещения трёх флекс-элементов по горизонтали (в ряд), но не задавали флекс-элементы по вертикали (в колонку). Другими словами, у нас был одномерный макет. Несмотря на то, что страница в целом представляла собой двумерный макет, флексбоксы поддерживают макет только в одном из этих измерений.

Мы могли бы изменить тот пример для использования флексбоксов в двух измерениях — по рядам и колонкам. Для этого воспользуемся концепцией, показанной выше. Таким образом, мы можем использовать один флекс-контейнер для вертикальной компоновки, а другой — для горизонтальной.

В нашем случае вертикальный макет состоит из следующих областей: шапка, основная часть, подвал. Вы можете представить всю страницу как одну большую колонку. И эта колонка содержит три ряда — один для шапки, один для основного содержимого и один для подвала.

Горизонтальный макет состоит из , и . Все они содержатся во втором ряду, но их необходимо разместить горизонтально. Следовательно, мы можем сделать второй ряд флекс-контейнером и заставить его содержимое выстроиться в ряд.

Итак, вот рабочий пример.

В нашем случае мы использовали следующий код для элемента .

body

display: flex делает флекс-контейнером, а flex-direction: column отображает его флекс-элементы в колонку. Мы также задали минимальную высоту для внешнего флекс-контейнера, чтобы макет занимал всю высоту экрана.

А теперь для вложенного флекс-контейнера.

#main

Добавление display: flex делает #main флекс-контейнером, подобно . Теперь его дочерние элементы становятся флекс-элементами. flex: 1 гарантирует, что он будет расти так, чтобы занимать максимум доступного пространства.

Мы могли бы добавить flex-direction: row , чтобы явно указать направление, но в любом случае row является значением по умолчанию.

Остальное — просто стилизация и упорядочивание флекс-элементов во вложенном флекс-контейнере.

#main > article < flex: 1; >#main > nav, #main > aside < flex: 0 0 20vw; background: beige; >#main > nav

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

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

Вложенные флексбоксы против CSS Grid

Каждый раз, когда используете вложенные флекс-контейнеры, подумайте, не лучше ли вместо этого использовать CSS Grid. Он специально разработан для двумерных макетов, поэтому для создания таких макетов не требуется вложенность (хотя она поддерживается).

Тем не менее, существует много макетов, для которых лучше подходят флексбоксы, так что рассмотрим несколько случаев.

См. также

  • flex-direction
  • Адаптивный макет на флексбоксах
  • Направление флексбоксов
  • Свойства flex-контейнера

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *