p
какие еще есть трюки в стиле отрицательных маржинов? хочу взять на вооружение
Size: a a a
2020 March 24
p
box-sizing: border-box;
да, точно. в проекте у меня normalize.css подключен
SB
Это не трюк, а следование спецификации и работа с потоком
SB
хватит считать всё новое трюкачеством и магией плиз. или костылями :)
SB
логика простая: есть наложение слоёв. надо чтобы наложение влияло на узлы документа ниже? работаем в потоке. не надо? работаем с абсолютом. надо картинку текстом обтекать? флоат. надо чтобы место было зарезервировано? работаем с трансформациями.
SB
это всё просто, одно вытекает из другого
p
четко, спасибо. коробочная модель, поток. я читал про это. надо осознать на практике
AV
ребят, хочу такую штуку сделать. есть psd. есть вопросы: 1) главный золотой блок экспортировать как svg? или сделать лучше как бэкграунд дива. 2) так же не знаю красные блоки и кнопки экспортировать как svg? или делать самому блоки 3) и как лучше расставить блоки(кнопки и экраны) в главном золотом блоке. может с помощью display: flex а потом поделить на ячейки и расставить с помощью flex-grow?
AV
точнее это нужно. но суть не меняется
DN
в svg можно как-то тегу текст указать точку трансформаций центр? а то transform-origin чет не работает
К
Всем привет. Имеется flex-контейнер (выделен красным) у него прописан
justify-content: space-between. Первая строка ведет себя хорошо, но вторая (при меньшем кол-ве карточке выглядит вот так. Как можно решить эту проблему? Я думаю можно поставить flex-start и расстояния задавать марджинами, но мне кажется адаптив из-за этого поломается.SS
мне кажется было бы быстрей проверить кодом чем писать сообщение, можешь использовать @media flex-basis/grow/shrink
SS
если карточки будут одинаковой ширины достаточно flex-basis и flex-start если хочешь их расположить без пространства во второй линии
R
Всем привет. Имеется flex-контейнер (выделен красным) у него прописан
justify-content: space-between. Первая строка ведет себя хорошо, но вторая (при меньшем кол-ве карточке выглядит вот так. Как можно решить эту проблему? Я думаю можно поставить flex-start и расстояния задавать марджинами, но мне кажется адаптив из-за этого поломается.А шо мешает сделать просто flex-flow: row wrap?
p
Всем привет. Имеется flex-контейнер (выделен красным) у него прописан
justify-content: space-between. Первая строка ведет себя хорошо, но вторая (при меньшем кол-ве карточке выглядит вот так. Как можно решить эту проблему? Я думаю можно поставить flex-start и расстояния задавать марджинами, но мне кажется адаптив из-за этого поломается.Предположу, что можно задать что-нибудь в стиле
width: calc(100% / 12 *3 - отступы)
width: calc(100% / 12 *3 - отступы)
R
И если карты одинаковые - оно просто будет красиво заполняться карта за картой, ограничив контейнер родителя по ширине и дав каждой карте, кроме 4-й к примеру маржин райт
R
Хотя если нужна резиновая верстка - там будут проблемки и я бы решил проблему иначе
К
Хотя если нужна резиновая верстка - там будут проблемки и я бы решил проблему иначе
Так гридом или иначе?)
R
Я не про то подумал, гриды тож для адаптива прикольные, а для резины - флексбокс мне заходит хорошо