Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 26 из 53 · 8 мин
flex-grow, flex-shrink, flex-basis и короткая запись flex.
Поиск по сайту: поле на всю ширину, кнопка «Найти» — сколько нужно.
Скажи полю, что оно умеет расти, — отдам ему всё свободное место.
flex-grow1 — забрать всё (поровну с другими единицами).<style>
.row { display: flex; gap: 6px; } .grow { flex-grow: 1; } div > div { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px 10px; }
</style>
<div class="row"><div class="grow">Поле</div><div>Найти</div></div>flex-shrink0 — не сжимать.<style>
.row { display: flex; width: 160px; gap: 6px; } .keep { flex-shrink: 0; } div > div { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px 10px; }
</style>
<div class="row"><div class="keep">Логотип</div><div>Длинное меню сайта</div></div>flex-basis200px, 30%, auto.<style>
.row { display: flex; gap: 6px; } .row > div { flex-basis: 100px; } div > div { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px 10px; }
</style>
<div class="row"><div>Пенал</div><div>Ручка</div><div>Блокнот</div></div>flexflex: 1 — расти и сжимайся от нуля; flex: 0 0 200px — ровно 200px.<style>
.row { display: flex; gap: 6px; } .row > div { flex: 1; } div > div { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px 10px; }
</style>
<div class="row"><div>Пенал</div><div>Ручка</div><div>Блокнот</div></div>flex: 1 у всех — равные колонки. flex: 1 у одного — он забирает свободное место.
Сделай .search флексом с gap: 8px, а полю .search input задай flex: 1.
Выберите один ответ.
Что значит flex-grow: 1 у одного элемента, а у остальных 0?
Введите короткий ответ без лишних пробелов.
Какое значение flex-shrink запрещает элементу сжиматься? Введи число.
Проверяем состояние обучения…