Аркуші

CSS FLEXBOX

головна вісь і поперечна · яка властивість до якої належить

Аркуш зроблено як памʼятку, а не як таблицю: угорі те, заради чого його вішають на стіну й читають з іншого кінця кімнати, нижче — повна довідка дрібнішим.

Три розміри в одному архіві — від аркуша на холодильник до плаката на стіну.

Завантажуючи, ви погоджуєтесь з Умовами.

Формати
A4 · A3 · A2
Що ви отримаєте
PDF, готові до друку, по одному на кожен формат, з усіма літерами в кривих — нічого не треба ставити й ніщо не попливе.
Предмет
код · початківцям · памʼятка · кабінет

Кольорова смуга позначає вісь: одна — головна, друга — поперечна. Значення justify-content показано розкладкою, а не описом.

FLEX: 1 — ЦЕ НЕ ТЕ, ЩО ЗДАЄТЬСЯ

Скорочення flex: 1 розгортається у grow 1, shrink 1 і basis 0% — а не basis auto, як здається. Той нуль міняє все: базовий розмір стає нульовим, і вміст перестає впливати на ширину.

Саме тому три елементи з flex: 1 виходять однакової ширини навіть тоді, коли в одному слово, а в другому абзац.

Потрібна протилежна поведінка — пишіть flex: auto: там basis лишається auto, і тоді довший текст справді забере більше місця.

Що на аркуші

  • Кольорова смуга позначає вісь: одна — головна, друга — поперечна. Значення justify-content показано розкладкою, а не описом.
  • Колір несе зміст, але зміст не тримається лише на кольорі — аркуш читається і в ЧБ.
  • Жодного пояснення про те, як ми його робили: на аркуші лише те, що потрібно читачеві.

Друк

  • Три розміри в архіві: A4 — 210×297 мм, A3 — 297×420 мм, A2 — 420×594 мм.
  • Увесь текст переведено в криві. Шрифти ставити не треба, і ніщо не попливе на чужій машині.
  • Білий фон і ощадна заливка — аркуш друкується на побутовому принтері без відра фарби.
  • Поля не менші за 10 мм: побутовий принтер не друкує під обріз.
  • Жоден штрих не тонший за 0,3 мм, тож нічого не зникне при друці.

Чому цим числам можна вірити. Кожне лічильне число тут обчислене з даних, а не набране руками, і аркуш проходить 4 незалежних перевірок, перш ніж його дозволено зібрати: скільки елементів, у якому порядку і саме твердження у виділеному блоці. Не пройде бодай одна — файла просто не буде.

Схоже