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

Поделиться
HTML-код
  • Опубликовано: 27 ноя 2024

Комментарии • 57

  • @morismustanger6095
    @morismustanger6095 Год назад +15

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

  • @polinapolunina2812
    @polinapolunina2812 Год назад +15

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

  • @pherum
    @pherum Год назад +4

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

  • @idg817
    @idg817 10 месяцев назад +3

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

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

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

    • @AleksanderLamkov
      @AleksanderLamkov  Год назад +5

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

  • @Ivanfwit
    @Ivanfwit Год назад +4

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

  • @smotritelyoutube
    @smotritelyoutube Год назад +18

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

  • @AlexBizhov
    @AlexBizhov 2 месяца назад +1

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

  • @ByTheWay12
    @ByTheWay12 4 месяца назад +1

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

  • @FlexonGordon
    @FlexonGordon 10 месяцев назад +3

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

    • @AleksanderLamkov
      @AleksanderLamkov  10 месяцев назад +1

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

  • @КонстантинКашапов
    @КонстантинКашапов 3 месяца назад +1

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

  • @OlegNaumov-me6yj
    @OlegNaumov-me6yj 11 месяцев назад +1

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

  • @svitboomer8840
    @svitboomer8840 Год назад +4

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

  • @ФедорФедотов-ь6ц
    @ФедорФедотов-ь6ц 2 месяца назад +1

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

  • @dmitryvertoprakhov5469
    @dmitryvertoprakhov5469 Месяц назад +1

    Спасибо большое!

  • @АнтошаГорохов
    @АнтошаГорохов 2 месяца назад +1

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

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

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

  • @makeeviv
    @makeeviv 23 дня назад +1

    Спасибо!

  • @LAMit
    @LAMit 3 месяца назад +1

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

  • @Хлори-р2ш
    @Хлори-р2ш Год назад +3

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

  • @asmtv1
    @asmtv1 5 месяцев назад +1

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

  • @Ghgtfgh1
    @Ghgtfgh1 3 месяца назад +1

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

  • @This_is_hellwood
    @This_is_hellwood Год назад +3

    Дочекавсяяя

  • @РоманВолков-д9щ
    @РоманВолков-д9щ 3 месяца назад

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

  • @barmalejZ
    @barmalejZ 7 дней назад

    Еще бы инфу о том, как вместе уживаются gap, flex и flex-basis. Порой они непонятно работают в связке

    • @AleksanderLamkov
      @AleksanderLamkov  7 дней назад

      Ну, flex-basis - подсвойство свойства flex. А что с gap? Не припоминаю, чтобы он как-то странно работал. Всегда максимально адекватно, что во флексах, что в гридах.

  • @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и9м
      @Анна-у1и9м 27 дней назад +1

      @@AleksanderLamkov Привет! Это невероятный курс, очень доходчивая подача материала. Спасибо огромное! Без воды, информативно и понятно - это очень сложный баланс, снимаю шляпу. Вопрос: а если start / end короче, и еще верстка универсальная, зачем пользоваться flex-start / flex-end?

    • @AleksanderLamkov
      @AleksanderLamkov  27 дней назад

      @Анна-у1и9м спасибо за обратную связь!)
      По поводу ответа на вопрос…
      Смысл в использовании flex-start и flex-end есть в специфичных ситуациях.
      Я немного не так объяснил нюансы разницы этих значений со start / end.
      На отличия в их поведении влияет не направление письма, то есть не условное правило 'direction: rtl', а направление главной флекс-оси.
      При flex-direction: row-reverse свойство justify-content со значением flex-start визуально прибьет флекс-элементы по горизонтали вправо, а со значением просто start - прибьет влево.
      Но в большинстве случаев значений start / end для свойств justify-confent и align-items достаточно. Лично я только их и использую в работе.

  • @НурдаулетБагдаулетов-ц4з

    Очень круто!
    Такой вопрос, а можно ли обойтись без использования width или height, если мы используем flex-basis в flex-контейнере?

    • @AleksanderLamkov
      @AleksanderLamkov  27 дней назад +1

      Да, в большинстве случаев можно.

  • @the_doriyush
    @the_doriyush 28 дней назад

    Саша привет. все очень подробно и четко объяснил, единственное, не могу решить 24 задачу по флексам на сайте flexbox froggy( пишу этот код
    flex-flow: wrap column-reverse;
    justify-content: center;
    align-content: space-between;
    в итоге нужно написать еще одну строчку кода, чтобы поменять колонки местами

    • @AleksanderLamkov
      @AleksanderLamkov  28 дней назад +1

      Привет! Спасибо за обратную связь. По поводу твоей задачи - скорее всего в значении flex-flow нужно wrap на wrap-reverse поменять, чтобы флекс-контейнер переносился в обратном порядке.

  • @phuntom777
    @phuntom777 5 месяцев назад

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

    • @AleksanderLamkov
      @AleksanderLamkov  5 месяцев назад

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

    • @phuntom777
      @phuntom777 5 месяцев назад

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

    • @AleksanderLamkov
      @AleksanderLamkov  5 месяцев назад

      Всё верно.

    • @phuntom777
      @phuntom777 5 месяцев назад +1

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

  • @ВадимАлекс-щ6ъ
    @ВадимАлекс-щ6ъ 26 дней назад

  • @aLeKseU852
    @aLeKseU852 9 месяцев назад

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

    • @AleksanderLamkov
      @AleksanderLamkov  9 месяцев назад +2

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

  • @Дмитрий-л3м1н
    @Дмитрий-л3м1н 6 дней назад

    А вот как сделать обтекание текста если не через float?

    • @AleksanderLamkov
      @AleksanderLamkov  6 дней назад

      Увы, тут только float, более удобных способов нет.

  • @ВиталийДавыдов-э4г
    @ВиталийДавыдов-э4г 9 месяцев назад

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

    • @AleksanderLamkov
      @AleksanderLamkov  9 месяцев назад +1

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

    • @ВиталийДавыдов-э4г
      @ВиталийДавыдов-э4г 9 месяцев назад

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

    • @AleksanderLamkov
      @AleksanderLamkov  9 месяцев назад +1

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

    • @ВиталийДавыдов-э4г
      @ВиталийДавыдов-э4г 9 месяцев назад

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

  • @neformal61
    @neformal61 9 месяцев назад

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

    • @AleksanderLamkov
      @AleksanderLamkov  9 месяцев назад +1

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

  • @German-wh4dm
    @German-wh4dm 3 месяца назад

    Тяжеловато

  • @31danmaster31
    @31danmaster31 Год назад +3

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