<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

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

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

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

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

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

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

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

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

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

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

Флекс контейнер и элементы флекса (верстальщику)

Флекс контейнер и элементы флекса (верстальщику)

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

Почему так получается? Вы читаете учебные статьи по HTML/CSS, смотрите видео на ютуб, на тему верстки. С воодушевлением следите за тем, как ведущий канала, легко и быстро набирает код в sublime редакторе. Однако, когда дело доходит до верстки макета, в голове полный "фарш". Сложности, совсем не в описании цвета или размера шрифта у элементов. А в нужном позиционировании элементов, на странице. В верстке, появляется много лишних дивов, иначе все развалится.

Визуализация контейнера и элементов

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

Флекс контейнер и элементы флекса.

Сделайте HTML разметку, опираясь на схему.

<section class="expert">
    <div class="expert__icon"></div>
    <h2 class="expert__title">Расскажите о своём опыте</h2>
    <div class="expert__form-container">
        ...содержимое пока пропускаем..
    </div>
</section>

CSS стили

Все специфичные стили, отвечающие за поведение флекс элементов, прописываются у флекс-контейнеров.

.expert {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

Последний элемент expert__form-container - контейнер и элемент одновременно.

Флекс контейнер и элементы флекса.

Делаем разметку, на месте многоточий, в коде выше.

<div class="expert__form-container">
    <div class="expert__form-wrap">
        ..пропускаем пока..
    </div>
    <div class="expert__form-wrap">
        ..пропускаем пока..
    </div>
    <div class="expert__form-wrap">
        ..пропускаем пока..
    </div>
</div>

CSS код

.expert__form-container {
    display: flex;
    justify-content: space-between;
}

Все флекс элементы expert__form-wrap - также являются и контейнерами.

Флекс контейнер и элементы флекса.

Вставляем HTML код, на месте многоточий, в предыдущем блоке.

<div class="expert__form-wrap">
    <form>
    <label class="expert__label">БЭМ/OOCSS
        <input class="expert__checkbox" type="checkbox" checked="checked">
        <span class="expert__checkmark"></span>
    </label>
    <label class="expert__label">Styles/LESS/SASS         <input class="expert__checkbox" type="checkbox">
        <span class="expert__checkmark"></span>
    </label>
    <label class="expert__label">Работаю с SVG
        <input class="expert__checkbox" type="checkbox" checked="checked">
        <span class="expert__checkmark"></span>
    </label>
    </form>
    </div>
<div class="expert__form-wrap">
    <form>
    <label class="expert__label">Верстаю семантично
        <input class="expert__checkbox" type="checkbox" checked="checked">
        <span class="expert__checkmark"></span>
    </label>
    <label class="expert__label">ES2015/ES2016
        <input class="expert__checkbox" type="checkbox">
        <span class="expert__checkmark"></span>
    </label>
    <label class="expert__label">Gulp/GRUNT
        <input class="expert__checkbox" type="checkbox" checked="checked">
        <span class="expert__checkmark"></span>
    </label>
    </form>
</div>
<div class="expert__form-wrap">
    <form>
    <label class="expert__label">Webpack
        <input class="expert__checkbox" type="checkbox">
        <span class="expert__checkmark"></span>
    </label>
    <label class="expert__label">jQuery
        <input class="expert__checkbox" type="checkbox" checked="checked">
        <span class="expert__checkmark"></span>
    </label>
    <label class="expert__label">Использую Git
        <input class="expert__checkbox" type="checkbox" checked="checked">
        <span class="expert__checkmark"></span>
    </label>
    </form>
</div>

CSS код

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

.expert__form-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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