<MyRusakov.ru />

Своя Web-студия за 55 дней

Своя Web-студия за 55 дней

Система "Своя Web-студия за 55 дней" поможет Вам открыть свою собственную успешную Web-студию всего за 55 дней. Обучение построено на теории, плюс практике, то есть я прямо на Ваших глазах буду абсолютно с нуля открывать свою Web-студию, нанимать специалистов, принимать и выполнять заказы. Это настоящее реалити-шоу. Плюс весь курс разбит по дням, в каждый из которых Вам необходимо будет посмотреть небольшое количество видеоуроков, выполнить задания по этим урокам и проставить галочки о выполнении. Каждый из дней у Вас будет отнимать не более 1-го часа в день.

Таким образом, выполняя ежедневно маленькие шажки, Вы через 55 дней станете владельцем уже прибыльной Web-студии, заработав при этом первые 100 000 рублей.

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

Подписавшись по 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):

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