Дизайн HTML-страниц. Язык CSS (ч.14)

Идем дальше вместе с flexbox.

Давайте опять немного изменим структуру нашей html-странички (по отношению к предыдущим статьям):

Тут я просто уменьшил количество блоков до четырех. И к тому же у каждого блока теперь по два класса (напомню: html-тэгам можно задавать сколько угодно классов, разделяя их пробелами)

CSS тоже придется поменять:

Для начало вот так. Что я тут написал: все блоки в контейнере будут flex-блоками, у каждого блока будет серая рамка толщиной в 1 пиксель и внутренний отступ по 50 пикселей со всех сторон.

Теперь предлагаю всем четырем классам (first, second, third и fourth) добавить свойство flex: 1;

После обновления страницы вы должны увидеть что блоки растянулись по всей ширине страницы, причем равномерно:

Давайте теперь например изменим свойство первого блока на flex: 3;

Вот что получится:

Первый блок стал больше остальных трех. Как вы уже поняли, с помощью этих свойств можно задавать пропорции блоков по ширине. В данный момент пропорции такие: размеры блоков (по ширине) относятся как 3:1:1:1

Вы можете менять таким образом любые пропорции блоков и задавать разные значения. Сейчас я хочу чтобы блоки 2 и 3 были гораздо больше блоков 1 и 4:

Выглядит это все так:

Напомню вам, все что мы сейчас делаем - адаптивно. То есть как бы вы сейчас не меняли размер окна браузера, наши блоки будут сохранять свои пропорции.

Перейдем к следующему свойству:

Классам first, second, third и fourth я добавил свойство order с разными значениями.

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

Но у этого свойства есть особенность:

По умолчанию у все элементов есть свойство order и значения там ровно такие как и в html (Например в коде один элемент идет первым - следовательно свойство у него order: 1; для второго order: 2; и так далее)

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

То есть вот это работать не будет:

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

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

Правильно так:

С цифрами вы можете экспериментировать как угодно (но только в пределах количества элементов. Если пять элементов - оперируйте числами от 1 до 5)

Ну и выглядит это так:

Первый и второй блок поменялись местами.

На этом flexbox еще не закончен, нас ждет много чего интересного и полезного)

@honey_and_money - Убейте в себе лень сейчас и потом будьте благодарны себе за это!