Полезная инфа по написанию работ

Шпаргалка по Flexbox



►——————————————————-◄
Вступайте в нашу группу на Facebook
Не проходите мимо самого дружелюбного чата BlondieCodeJS ( Здесь можно получить ответы на любые вопросы о программировании, найти стикеры с котиками и пообщаться с интересными людьми 😉
►——————————————————-◄
Моя версия шпаргалки по спецификации CSS Flexible Box Layout Module.
Рассмотрим что такое Flexbox в картинках.
Flexbox — будущее верстки веб-страниц. Flexbox — самый удобный способ создать резиновый макет.
Макет флексбокс состоит из flex-контейнера и flex-блоков. Для инициации нужно добавить в css контейнера display:flex.
Flexbox поддерживается браузерами: Chrome 21+, Opera 12.1+, Firefox 22+, Safari 6.1+, IE 10+.
Блоки внутри флекс-контейнера становятся резиновыми, они сжимаются, растягиваются и выравниваются по осям по заданным правилам. Flexbox адаптирован под браузеры с локалью rtl (для языков которые читаются справа налево).

Для блока во флекс-контейнере можно задать margin: auto и блок центрируется и по горизонтали и по вертикали.
У флекс-контейнера есть 2 оси — главная и поперечная. Свойство flex-direction отвечает за направление главной оси (значения column, row, row-reverse, column-reverse). Свойство justify-content отвечает за выравнивание по главной оси (flex-start, flex-end, center, space-between, space-around). Свойсво align-items выравнивание по поперечной оси ( flex-start, flex-end, center, baseline — выравнивание по базовой линии (это линия на которой сидят буквы шрифта, при этом хвостики как у ц или р свисают вниз), stretch).
Для того, чтобы контейнер обтекал свои блоки нужно указать ему свойство flex-wrap (wrap, nowrap, wrap-reverse).
Можно записать направление и обтекание одним свойством flex-flow.
Свойство flex-basis это размер блока по главной оси контейнера. Может быть задан конкретным числом в пикселях, процентах или em, а может принимать значение auto, тогда размер флекс-блока будет равен размеру его содержимого.
Свойство flex-grow или жадность определяет во сколько раз этот блок будет больше своих соседей (по умолчанию flex-grow = 0).
flex-shrink это коэффициент сжимаемости блока, по умолчанию равен 1 и определяет на сколько блок готов ужаться относительно своих соседей, если место в контейнере закончится.
Свойство order — порядок следования элементов в контейнере.
Можно также выровнять отдельно взятый блок по оси при помощи align-self.
#BlondieCode #flexbox #frontend

Источник

Узнайте стоимость Online
  • Тип работы
  • Часть диплома
  • Дипломная работа
  • Курсовая работа
  • Контрольная работа
  • Решение задач
  • Реферат
  • Научно - исследовательская работа
  • Отчет по практике
  • Ответы на билеты
  • Тест/экзамен online
  • Монография
  • Эссе
  • Доклад
  • Компьютерный набор текста
  • Компьютерный чертеж
  • Рецензия
  • Перевод
  • Репетитор
  • Бизнес-план
  • Конспекты
  • Проверка качества
  • Единоразовая консультация
  • Аспирантский реферат
  • Магистерская работа
  • Научная статья
  • Научный труд
  • Техническая редакция текста
  • Чертеж от руки
  • Диаграммы, таблицы
  • Презентация к защите
  • Тезисный план
  • Речь к диплому
  • Доработка заказа клиента
  • Отзыв на диплом
  • Публикация статьи в ВАК
  • Публикация статьи в Scopus
  • Дипломная работа MBA
  • Повышение оригинальности
  • Копирайтинг
  • Другое
Рассчитать стоимость
Close