Задать вопрос

Как сделать адаптивный сайт через flexbox?

как сделать сайт адаптивным с помощью flexbox в каких единицах указывать блоки шрифты что бы всё сжималось нунужного мне размера про медиа запросы знаю меня интересует только единицы измерения
  • Вопрос задан
  • 3155 просмотров
Подписаться 2 Оценить 3 комментария
Решения вопроса 1
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
меня интересует только единицы измерения

они никак не связаны с flexbox и с адаптивностью. Или правильнее сказать связаны косвенно. Вы можете использовать любые единицы или их комбинации.
Адаптивность сайта это комплекс мер. Что-то достигается благодаря использованию flexbox, что-то медиазапросами, что-то относительными единицами. И одно не исключает другого. Одни блоки могут быть в одних единицах, другие в других. Шрифты могут быть в третьих.
Дать совет по использованию тех или иных единиц можно только на примере участка верстки в конкретном проекте, а не дизайна в целом в абстрактном проекте.
Опытный верстальщик смотрит на дизайн и продумывает, как будет реализовать адаптивность того или иного блока, соответственно наметив себе план по каждому куску принимает решение в пользу тех или иных единиц, методов адаптивности и т.д. И подчеркну, никто не запрещает Вам использовать разные единицы, не стоит выбирать для всего проекта допустим % и потом городить что попало, только чтобы не перейти на px.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Так же как это делается и c bootstrap. У вас есть набор классов, который при определенной ширине экрана меняет свое значение.

Берем обычный пример:
<div class="row">
	<div class="col-md-4 col-xs-4"></div>
	<div class="col-md-4  col-xs-4"></div>
	<div class="col-md-4  col-xs-4"></div>
</div>

Так мы создали строку из трех блоков в ней. В bootstrap 3 у вас блокам задается свойство float:left;

В случае с flex, вам надо задавать .row свойства:
.row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

У колонок вы убираете float:left
Далее при адаптации вы .row присваиваете одно свойство: flex-direction:column; если вам надо чтобы внутренние элементы располагались в колонку (столбик). Для внутренних блоков так же пишете что-нибудь типа col-xs-12, чтобы они занимали 100% ширину родителя на телефоне. Ничего сложного.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы