<MyRusakov.ru />

Разработчик игр на Unreal Engine

Разработчик игр на Unreal Engine

Этот комплект с нуля всего за 7 месяцев сделает Вас Unreal-разработчиком. И при этом учиться достаточно 1 час в день.

Начнёте Вы с основ программирования, постепенно перейдя к C++. Затем очень подробно изучите Unreal Engine, и после научитесь программировать на C++ в Unreal Engine. В конце создадите крупный проект на C++ в Unreal Engine для своего портфолио.

Комплект содержит:

- 416 видеоуроков

- 95 часов видео

- 1024 задания для закрепления материала из уроков

- 3 финальных тестирования

- 4 сертификата

- 12 Бонусных курсов

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Свойство Flexbox в CSS3.

Свойство Flexbox в CSS3.

Всем привет! Сегодня мы поговорим об очень интересном свойстве flexbox, появившемся в CSS3.

Свойство flexbox было создано для того, чтобы нам было удобно располагать элементы, когда мы не знаем их количество и/или размеры.

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

Joni Bologna - девушка-дизайнер уже сделала прекрасную шпаргалку по этой теме, и мы будем использовать ее, чтобы лучше понять данное свойство. Перейдите по ссылке Flexbox Cheatsheet, и здесь вы найдете PDF файл с наглядным описанием.

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

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

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

Чтобы активировать свойство, просто создайте контейнер и пропишите ему свойство

.container {
  display: flex;
}

Дальше вы можете выбрать нужное вам направление: горизонтально(row) или вертикально(column)

Для первого:

flex-direction: row;

Для второго:

flex-direction: column;

Чтобы поменять порядок расположения элементов(т.е. первый станет последним, а последний первым), вам нужно добавить приставку -reverse

flex-direction: row-reverse;

или

flex-direction: column-reverse;

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

justify-content: flex-start; // в начале
justify-content: center; // в центре
justify-content: flex-end; // в конце

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

Еще одна сильная вещь в свойстве flexbox - flex-wrap. Т.е. вы можете указать, как вести себя элементам при изменении области просмотра. К примеру, вы можете указать

flex-wrap: wrap;

И тогда, при уменьшении области просмотра, элементы будут становиться в ряды. Т.е. вести себя так, будто бы у нас есть сетка. Это может быть очень удобно для галереи, как пример.

Итак, мы разобрали самые основные свойства flexbox модели, зная которые, вы уже можете начать верстать по-новому. Остальные свойства и картинки, наглядно поясняющие материал, вы можете найти в шпаргалке, перейдя по ссылке в начале статьи.

Спасибо за внимание и удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.