<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

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

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

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

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

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

Каким движком Вы предпочитаете пользоваться?

Flex-свойства на практике

Flex-свойства на практике

При помощи таких свойств, как flex-basic, flex-grow и flex-shrink, мы можем управлять размерами flex-элементов.

Flex-basic

Flex-basic отвечает за базовый размер flex-элемента, а его значение по умолчанию auto. При значении auto, базовый размер flex-элемента берется из свойств width или height, в зависимости от направления главной оси. Однако если у flex-basic заданы размеры, то они будут иметь приоритет. Главное отличие flex-basic от width или height состоит в том, что при изменении направления главной оси, flex-basic реагирует на такое поведение. Если главная ось имеет горизонтальное положение, то flex-basic отвечает за ширину элемента. При вертикальном положении главной оси, flex-basic отвечает за его высоту.

Flex-grow

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

Flex-shrink

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

Теперь рассмотрим, как использовать перечисленные выше свойства при верстке реального макета. Вы видите панель с элементами, которые на макете занимают разную ширину. По этой причине одного универсального свойства justify-content, будет недостаточно.

Flex-свойства на практике.

Создадим flex-контейнер и зададим ему свойство justify-content: space-between. Оно прибьет крайние элементы к краям контейнера (логотип и иконки).

<nav class="nav-callback__wrapper">
    // внутри элементы
</nav>

nav-callback__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center; // выравнивает по вертикали
    height: 80px;
}

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

Flex-свойства на практике.

<a href="#" class="nav-callback__logo">
    <img src="assets/img/logo.png" alt="Logo.png" class="logo__img">
    <span class="logo__title">Advogrand</span>
</a>
<span class="nav-callback__text">Ваш личный юрист всегда на связи</span>
<a href="tel:+74993228580" class="nav-callback__phone">+7 499 322-85-80</a>
<div class="nav-callback-social">
    <a href="#" class="nav-callback-social__link"><span class="nav-callback__android"></span></a>
    <a href="#" class="nav-callback-social__link"><span class="nav-callback__apple"></span></a>
</div>


nav-callback__logo {
    flex: 1;
  }


nav-callback__text {
    flex: 1;
  }

Мы использовали краткую запись flex: 1, подразумевая свойство flex-grow. Так как дефолтные свойства у flex-shrink и flex-basic, нас устраивают.

Краткая запись flex: 1; эквивалентна полной записи:

flex-grow: 1;
flex-shrink: 1; // дефолтное значение
flex-basis: 0%; // дефолтное значение

Flex-свойства на практике.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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