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

Question

[Сергей Васенин]

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

Comments

[Иван]

флексы юзаю за расположение блоков,и проценты,,усё

[Роман Александрович]

Прочтите сверху до низу html5.by/blog/flexbox
а еще лучше пасмотрите https://www.youtube.com/watch?v=7Lg-438gAc8&list=P...
времени займет не много зато вопросы отпадут
Про единици измерения я использую px

[Максим]

проценты пиксели em rem хоть метры и километры

Answer 1

[Максим Тимофеев]

меня интересует только единицы измерения

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

Answer 2

[Алексей Скляров]

Так же как это делается и 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% ширину родителя на телефоне. Ничего сложного.