Как правильно сделать перенос на разных экранах в Susy!?

Question

[x-comzbk]

codepen.io/anon/pen/XNZaQR?editors=1100

собвственно вопрос: не могу понять, почему у меня при ширине 768, обе колонки(левая и правая) становяться по 6 столбцов(спанов) и стоят в линию! в то время как я ожидал совершенно другого результата, ведь я указал что при 768 занимает 12спанов! Надеялся, что они обе станут на ширину контейнера(12 колонок) и выстрояться дру под другом!
Подскажите пожалуйста, что я сделал не так?

Answer 1

[zooks]

Потому что на контейнер main назначен flex, а внутри него используются техники float (через Susy).

Т.е. при использовании Flex вместо:
@include span(8);
нужно писать:
flex-basis: span(8);

Либо если вы хотите делать через float в Susy, то просто уберите flex для main.
Об output: flexbox в документации ни слова: susydocs.oddbird.net/en/latest/settings/#output

Comments

[x-comzbk]

ну там же в настройках susy стоит "output: flexbox" ну и даже если делать как вы говорите - все равно при меньшей 768 они (левая и правая колонка) становться по шесть колонок, а не по 12 друг над другом! в чем же все таки проблема!? можете сейчас посмотреть я сохранил кодпен, изменив в нем @include span(x) на flex-basis: span(x)! изменилось после таких правок - только то, что между левым и правым теперь нету промежутка, а они сразу идут впритык к друг другу!

[zooks]

x-comzbk: ну так в инспекторе смотрите - обычные float. Тем более об "output: flexbox" в документации ни слова: susydocs.oddbird.net/en/latest/settings/#output

Если вы хотите действовать этим способом (float через Susy), то просто уберите flex для main. Если все-таки через flex, то меняйте свойство flex-direction для main.

[x-comzbk]

про аутпут флекс увидел вот здесь думал работает https://habrahabr.ru/post/241844/ там в низу статьи в скрытом тексте.
не ну да можно убрать для маина флекс, ну дело в том я почти во всех проектах так делаю - чтобы занимал всю высоту оставшуюся, либо тогда придеться делать main - min-height: math ( 100vh - heightHeader - heightFooter), а так делать бы не хотелось! ))

[x-comzbk]

чтобы футер был к низу прижат)

[x-comzbk]

а что комментарий нельзя отметить решением?? спасибо да действительно если маин флекс то не работает, убрал флекс и все олично! напишите свой коммент в ответ я помечу решением!

[zooks]

x-comzbk: "чтобы занимал всю высоту оставшуюся" - в этом случае flex указывается не для main, а для body.
OK, указал.

[x-comzbk]

zooks: а ну да кстати, это я уже чет запарился))