Антон Спирин, задача сверстать вот такую универсальную адаптивную сетку: prntscr.com/ip0osv
контейнер, который показан на скриншоте розовым, должен быть без отступов снизу сверху справа слева.
отступ должен быть только между элементами.
Это легко делается с помощью CSS Grid и Grid Gap, но адаптивность должна работать следующим образом:
если ширина у элементов (на скриншоте показаны жёлтым цветом) задана фиксированной в пикселях (width или min-width) и, например, для 3-х элементов в ряду эти элемены перестают "помещаться" в контейнер при сжатии экрана, то элементы должны переноситься на новую строку.
Медиазапросы хорошо работают когда колонки "резиновые", т.е. заданы в процентах. При этом идёт привязка к ширине экрана. А нужна сетка, которая будет отталкиваться от минимальной ширины элемента, чтобы если несколько элементов не помещаются в контейнер при сжатии, то они автоматически переносились. Сделать это с помощью CSS Grid, когда внутри грида элементы с разной шириной, насколько я знаю, невозможно, поэтому пытаюсь сделать это на Flexbox.
Вы предлагаете мне вариант с нижним margin внизу, но это не вариант, потому что этот маржин лишний, его не должно быть, если ниже элементов в контейнере больше нет других элементов.
Alexander Litvinenko, был бы код очень простым, сетка flexbox была бы уже стандартом, и не было бы велосипедов.
не можете привести пример, значит сами не до конца понимаете, как это реализовать.
Alexander Litvinenko, можете привести пример в codepen как можно реализовать сетку с отступами между колонками, чтобы границы родителя шли по линии внешних границ колонок?
Антон Спирин, дак вот на codepen задача, только нужно нижний margin убрать, чтобы отступы были только между колонками внутри row и если колонки в несколько рядов, то между ними вертикальные отступы были, при этом между верхней границей row и нижней границей row и колонками отступа быть не должно.
Нужно сделать то-же самое что реализуется с помощью:
display: grid;
grid-gap: 10px;
только на flexbox, потому что css grid не поддерживает перенос колонок при сжатии.
Антон Спирин, как тогда добавить правильно вертикальные отступы между элементами в случае их переноса на новую строку? Можно пример на codepen?
Почему всё же не работают маржины по оси Y ?
Не работает. Вот в таком варианте https://codepen.io/anon/pen/LdYwEq не работает нижний маржин.
Отступы должны быть только между колонками, ни сверху, ни снизу. Как это реализовать?
Хотя нет, blur прекрасно работает, браузер запоминает позицию последнего фокуса и продолжает выбирать элементы после элемента, на котором был клик, что вполне предсказуемо. Спасибо.
Эффект фокуса у элемента должен быть для управления с клавиатуры. Делать blur в данном случае неправильно, потому что клик на таком элементе уберёт фокус с элемента, который находился в фокусе до клика. Т.е. по факту фокус всё таки будет (отключить фокус и включить/выключить не одно и то же).
Возможно, есть какой-нибудь CSS селектор или HTML атрибут который будет указывать браузеру что на данном элементе нужно отлючить автофокус по клику?
Ну ридонли конечно же поле не должно становиться, мышь должна стандартно реагировать на input.
По-идее, я так понял, что у инпута нет такого стандартного состояния чтобы он был в фокусе и при этом не моргал курсор, получается, дефолтное поведение по нажатию на кнопку Enter должно быть таким же как и при нажатии на кнопку Tab, т.е. переходить к следующему элементу с tabindex.
Можете подсказать каким образом это реализовать? (желательно на нативном js)
Рекомендую вместо \s использовать именно пробел ( или символьный класс пробела [ ] ), так как \s - это пробельный символ (таб, пробел или перенос строки).
//это просто объявление функции, ничего не делает пока её не вызовут
function plus1(x) {
return x+1;
}
//здесь y равен 3, поэтому вернётся 4
//обратите внимание, здесь результат никуда не передаётся, при следующем вызове этой функции с y=3 всё равно вернётся 4.
plus1(y)
//в переменную square положили объявление (дескриптор) функции, код ничего не делает пока не вызовут эту функцию
var square = function(x) {
return x*x;
};
// сначала сработает функция plus1(y), которая точно также вернёт 4, потому как y здесь тоже равен 3
// совсем не важно что эта функция вызывалась чуть ранее
// потом сработает square( 4 ), которая вернёт 16
square( plus1(y) )