12. CSS Flexbox Layout. Флексы в CSS. Гайд по флексбокс

Поділитися
Вставка
  • Опубліковано 1 жов 2024

КОМЕНТАРІ • 44

  • @ДмитрийМатвеев-л1ф

    Александр, спасибо большое Вам за образовательный курс и проделанную работу. Случайно наткнулся на Ваш канал и считаю, что это один из самых доступных и понятных курсов по HTML и CSS
    Надеюсь, что в будущем Вы разберете и расскажите про a11y

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +5

      Спасибо! Да, про доступность обязательно будут видео :)

  • @polinapolunina2812
    @polinapolunina2812 Рік тому +12

    Отличный курс)) за пару дней посмотрела и повторила все темы. Автор очень понятно объясняет и обращает внимание на важные моменты

  • @ФедорФедотов-ь6ц
    @ФедорФедотов-ь6ц 11 днів тому +1

    Полезный курс) Автор молодец, понятно объясняет. Спасибо за твой контент!

  • @smotritelyoutube
    @smotritelyoutube Рік тому +18

    Очень полезный урок и главное всего 16 минут и все темы разобраны, автор говорит что урок длинный, если что другие уроки по флексам/гридам на ютубчике идут 1-2 часа, жесть просто, так что ставим лайки ребят, очень не хочется чтобы автор забросил такие уроки!!!

  • @Ivanfwit
    @Ivanfwit Рік тому +4

    спасибо за видео!) flex-basis, flex-shrink, align-content тяжело даются эти свойства иногда)) приходится перебрать, чтобы подобрать то что нужно при верстке, а не сразу поставить нужное значение у свойства. если будут сложности обязательно к этому супер понятному видео буду возвращаться)

  • @morismustanger6095
    @morismustanger6095 Рік тому +10

    Просто тебе человеческое спасибо за такие уроки

  • @Ghgtfgh1
    @Ghgtfgh1 Місяць тому +1

    молодец! все понятно

  • @LAMit
    @LAMit Місяць тому +1

    Как всегда лайк)👍

  • @АнтошаГорохов
    @АнтошаГорохов 11 днів тому +1

    Топовый контент!

  • @idg817
    @idg817 8 місяців тому +3

    Спасибо, хорошая работа! До твоего урока по этой теме, несколько смутно понимал Flexbox Layout, а после просмотра всё встало на свои места. Очень понравился FLEXBOX FROGGY. Благодаря уроку получилось пройти его с первого захода, а потом для закрепления материала ещё пару раз

  • @pherum
    @pherum Рік тому +4

    Какой молодец. Без воды, нудятины и шепелявинья! Ну красавчик!!!

  • @svitboomer8840
    @svitboomer8840 Рік тому +4

    Достойно, очень круто

  • @РоманВолков-д9щ
    @РоманВолков-д9щ Місяць тому

    Спасибо за такой труд! Круто, особенно с лягушками. Хотя на мой взгляд это упражнение больше помогает запомнить правильное написание свойств и их значения.
    Обычно, когда я работаю с флексами, я смотрю в DevTools. Новичкам будет сложно понять, как использовать флексы на примерах с лягушками в реальной разработке.
    P.S. Эти курсы однозначно не для начинающих, а для продвинутых разработчиков, которые уже сверстали не один сайт и хотят закрепить материал. Если вы записываете в тетрадь все, что рассказывает Александр, то вам сюда ещё рано. Лучше сначала пройти курсы Евгения Попова.
    Ждем курсы по React.js ;)

  • @AlexBizhov
    @AlexBizhov Місяць тому +1

    Огнище! Спасибо!!! За лягушечный тренажёр - отдельная благодарность!

  • @colodatwin3102
    @colodatwin3102 Рік тому +3

    You're the best teacher in the world) Thanks a lot for these lessons!
    на 12:55 , что значит учитывает направление языка? Не совсем понял

    • @AleksanderLamkov
      @AleksanderLamkov  Рік тому +5

      Привет! В арабском верстка и текст идут справа налево, а в японском - сверху вниз. Обычные значения flex-start и flex-end эти нюансы не учитывают, а start / end будут как бы инвертироваться.

  • @КонстантинКашапов
    @КонстантинКашапов Місяць тому +1

    Как бы еще похвалить за контент :) Дай бог здоровья что ли) Как всегда наглядно и без лишнего

  • @Хлори-р2ш
    @Хлори-р2ш Рік тому +3

    красава, стараешься

  • @FlexonGordon
    @FlexonGordon 8 місяців тому +2

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

    • @AleksanderLamkov
      @AleksanderLamkov  8 місяців тому +1

      Привет! Спасибо за фидбек :) По поводу практических заданий учту обязательно в следующей версии курса.

  • @This_is_hellwood
    @This_is_hellwood Рік тому +3

    Дочекавсяяя

  • @ByTheWay12
    @ByTheWay12 2 місяці тому +1

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

  • @ЭйсВентура-б8д
    @ЭйсВентура-б8д 5 місяців тому +1

    Отличный Урок! Давай больше практики, пару макетов в месяц было бы отлично сверстать в прямом эфире.

  • @OlegNaumov-me6yj
    @OlegNaumov-me6yj 9 місяців тому +1

    Привет, начал изучать HTML CSS и смотрю твои курсы и уроки по версте, у тебя отличный курс, все четко и по делу, ничего лишнего, структурированно преподносишь информацию, приятный голос и хорошая дикция, с монтажом видео видно что тоже постарался, спасибо за годный курс)

  • @German-wh4dm
    @German-wh4dm 2 місяці тому

    Тяжеловато

  • @asmtv1
    @asmtv1 3 місяці тому +1

    всё ещё топ инфа!

  • @31danmaster31
    @31danmaster31 Рік тому +3

    Нам проще не нужно, кому нужно проще идут в армию. Нам нужно посложнее ☝

  • @phuntom777
    @phuntom777 3 місяці тому

    Александр, огромное спасибо за столь подробный видео-урок! Подскажите, пожалуйста почему при изучении свойства justify-content при значении flex-direction:column для родительского контейнера была задана высота 700 px, а ранее при изучении свойства flex-direction:column вы не задавали никакое значение высоты?

    • @AleksanderLamkov
      @AleksanderLamkov  3 місяці тому

      Чтобы был эффект от justify-content при column направлении флекс-контейнера, нужно чтобы у этого самого флекс-контейнера была задана определенная (не auto) высота.

    • @phuntom777
      @phuntom777 3 місяці тому

      Я так поняла вроде, что если свойство высоты в 700 px не указать, то тогда высота будет равна высоте содержимого, и не удастся продемонстрировать, как работает свойство justify-content? Или я ошибаюсь?

    • @AleksanderLamkov
      @AleksanderLamkov  3 місяці тому

      Всё верно.

    • @phuntom777
      @phuntom777 3 місяці тому +1

      ​@@AleksanderLamkov огромное вам спасибо, всё очень доступно объяснили!! Пойду теперь отрабатывать данную тему в flex-froggy🐸😊

  • @aLeKseU852
    @aLeKseU852 7 місяців тому

    После просмотра возник вопрос. Свойство flex применяется только к элементам div? Или мы условно можем применять это свойство к элементам header или footer?

    • @AleksanderLamkov
      @AleksanderLamkov  7 місяців тому +2

      Привет! Можем применять к любому элементу. Разве что к табличным тегам не стоит применять.

  • @neformal61
    @neformal61 7 місяців тому

    Почему нельзя сделать к каждому уроку конспекты? Это же просто перекопировать сценарий видео.

    • @AleksanderLamkov
      @AleksanderLamkov  7 місяців тому +1

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

  • @ВиталийДавыдов-э4г
    @ВиталийДавыдов-э4г 7 місяців тому

    Когда уместно применять флекс , когда гриды ?

    • @AleksanderLamkov
      @AleksanderLamkov  7 місяців тому +1

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

    • @ВиталийДавыдов-э4г
      @ВиталийДавыдов-э4г 7 місяців тому

      @@AleksanderLamkov Спасибо. Во всех лу ситуациях сетки верстать гридами или можно использовать устаревшую таблицу?

    • @AleksanderLamkov
      @AleksanderLamkov  7 місяців тому +1

      Таблицы нужно использовать только для табличных данных, то есть где есть явная «легенда» (заголовочные ячейки столбцов и/или строк).
      В остальных случаях для сеток - гриды.

    • @ВиталийДавыдов-э4г
      @ВиталийДавыдов-э4г 7 місяців тому

      @@AleksanderLamkov Спасибо Александр