предисловие
Недавно я узнал о макете Flexbox, и в то время он казался артефактом макета. Наконец-то избавились от дней использования различных плавающих макетов позиционирования. Я хочу написать статью, чтобы обобщить это. Я обнаружил, что статьи, представляющие класс макетов Flexbox, были написаны плохо, и все виды великих богов написали яркие изображения. Простое написание использования макета кажется бессмысленным, кроме удобства. местной инспекции, поэтому я подумал об этом. Я видел такой веб-сайт в видео раньше, но я не мог открыть URL-адрес в то время, поэтому у меня возникла идея написать его самостоятельно. Его могут использовать и новички.
Демонстрационная станция Flexbox
Вероятно, это так:
- Щелкните, чтобы задать значение каждого свойства контейнера Flex и элемента Flex, а также ширину элемента и увидеть эффект в реальном времени справа. Начинающим легче понять роль каждого свойства.
- Дружеское напоминание: новичкам нелегко запомнить все атрибуты и значения, функцию соответствующего атрибута можно отобразить, наведя указатель мыши на имя атрибута.
Ознакомьтесь с демонстрационной станцией Flexbox
Я только что написал несколько отзывчивых CSS.Эффект от мобильного просмотра может быть не очень хорошим.Рекомендуется кушать на ПК.
наконец
Поместите несколько блогов, которые я читал, когда изучал макет Flexbox:Ruan Yifeng - Учебное пособие по гибкому макету: грамматика Ruan Yifeng - Учебное пособие по Flex Layout: примеры Визуально познакомить вас с тем, как работает flexbox (1)
Последняя, наглая просящая Звезда (побег) Если вы изучаете Flexbox, этот небольшой сайт вам немного поможет.