Адаптивная верстка

[alex_web64]

Здравствуйте.

У меня проблемы с адаптивной версткой, а точнее с пониманием того, что должно происходить при изменении размеров. К примеру, есть такой код https://jsfiddle.net/o2e1fwyq/Я так понимаю, в определенный момент фото должно быть на одной строке, а текст опуститься ниже. При какой ширине окна это должно происходить, на глаз определять?

И второе, верстаю флексбоксом не до конца понимая, как он работает. Почему фото имеет какую-то рандомную ширину? Как она определяется в текущий момент?

[andrey7287]

на глаз определять?

 

как вариант

Как она определяется в текущий момент?

 

она определяется css правилами, работающими в текущий момент 

[Igor Schnaider]

Дело в том, что flex элементы всегда "пляшут" от такого понятия, как оставшееся пространство. Как при распределении положительного (если контейнер вмещает все эелементы и еще остается пустота), так и отрицательного (как в вашем случае). Flex элементы при распределении этого пространства между собой смотрят на flex-basis (если не определен, то размер по умолчанию, как я понял) и flex-grow/flex-shrink.

 

Если взять ваш пример, то тут следующее (для удобства я оставил фиксированную ширину контейнера, чтобы проще считать было и был понятен принцип, а также убрал margin):

 

1. Размер контейнера = 800px
2. Размер картинки = 500px
3. Размер текста = 800px (так как его много и он заполнит весь контейнер как минимум одной строкой)

 

Дальше считаем:

1. Общее пространство = 500 (flex-grow = 1, поэтому 500 остается) + 800 = 1300px
2. Коэффициент сжатия для первого элемента = 500 * 1 (flex-shrink по умолчанию = 1) / 1300 = 0,3846153846
3. Коэффициент для второго элемента = 800 * 1 / 1300 = 0.6153846154
4. Теперь отнимаем у элементов часть пространства, чтобы все влезло в контейнер:
   1. У первого: -500px * 0,3846153846 (отрицательное недостающее пространство у контейнера умножаем на полученный коэффициент) = -192.3076923
   2. У второго: -500 * 0.6153846154 = -307.6923077

То есть первый элемент теперь будет ≈307px в ширину (500px - 192.3076923px), второй ≈492px.

 

Размеры можно проверить с помощью DevTools.

 

 

UPD: Если не хотите, чтобы картинку "плющило", поставьте ей flex-shrink: 0;

Edited January 28, 2016 by Igor Schnaider