- Внешние блоки отцентрованы по верху и низу, значит вертикальный внешний отступ будет auto
- У внутренних блоков есть auto отступ: у желтого сверху, у фуксии - снизу. Осталось разобраться: чо по горизонтали?
- Малые блоки отстают от своих краев на глаз эдак 5px (ну мы знаем, что в курсе нам дают кратные 5 пикселям значения, так что чому нет?).
- Между большим и малым блоком есть расстояние, и мы его можем на глаз (это мой любимый научный метод) определить в 10px, но памятуя о том, что во флексах маржины не складываются, определяем боковые маржины между большими и малыми блоками по 10/2=5px. Тут мы уже великолепны, т.к. определили у блоков 3 значения:
а) у больших верх-низ и до малого;
б) у малых верх-низ и до большого. - А теперь самое интересное: мы наблюдаем симметрию элементов - и тут пора бы задаться вопросом: почему? либо заданы симметричные значения маржинов из расчета ширины родительского флекса, либо же тут стоят auto. Но ширины родителя мы не знаем, глазомер сломался еще в 4 пункте, и нам остается подставить везде auto.
- ???
- PROFIT!
З.Ы. по пункту 2 - на самом деле на глаз видно 10px, но если посмотрим в отладчик, то у родителя прописан скрытый стиль - внутренний отступ на те же 5px
по пункту 5 - в том же отладчике мы видим ширину в 295px, паддинг и пр. у родителя, но решение через auto более элегантное и было более правильным с точке зрения отображения на малых экранах.