LibraTool logoLibraTool

Тавлидгари CSS Flexbox-и ройгон

Самт, печондан, ҷобаҷогузорӣ ва баробаркуниро дар унсурҳои зинда озмоед — ва CSS-ро нусхабардорӣ кунед.

Ҳамин ки бор шуд офлайн кор мекунад
Пешфарзҳо

Маслиҳат: барои иваз кардани flex-grow: 1 дар пешнамоиш ба он тагдиха кунед.

Пешнамоиши зинда
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 Ҳама чиз дар браузери шумо кор мекунад — ҳеҷ чиз бор карда намешавад.

Чӣ тавр он кор мекунад

Майдончаи флексбокси интерактивӣ: flex-direction, wrap, justify-content ва align-items-ро иваз кунед ва то 10 элементи зинда фавран аз нав тартиб дода шаванд бубинед. Ягон элементро зер кунед, то ба он flex-grow: 1 диҳед ва бубинед, ки чи гуна фазо мегирад. CSS зинда нав мешавад, омода барои нусхабардорӣ ба лоиҳаи шумо.

  1. 1
    Контейнерро танзим кунед
    Самт, wrap, justify-content, align-items, фосила.
  2. 2
    Элементҳо илова кунед
    Як то даҳ элементи флекси рақамгузошташуда.
  3. 3
    Таҷриба кунед
    Элементеро зер кунед, то flex-grow-ро иваз кунед ва таъсирро бубинед.
  4. 4
    CSS-ро нусхабардорӣ кунед
    Қоидаҳои контейнер (ва элемент), омода барои часпонидан.

Ҳама чиз дар браузери шумо кор мекунад — ҳеҷ чиз бор карда намешавад.

Абзорҳои марбут

🟦

Тавлидгари шабакаи CSS

Шабакаи CSS-ро ба таври намоён тарҳрезӣ кунед — трекҳо, воҳидҳо ва фосилаҳо — ва CSS ва HTML тавлидшударо нусхабардорӣ кунед.

Кӯшиш кунед
🎨

Тавлидкунандаи сояи қутти CSS

Созандаи визуалии box-shadow-и CSS бо пешнамоиши зинда, дастабандии бисёрқабата, интихобгари ранг, тағйирдиҳандаи inset ва нусхабардории якклика. Пешбурдҳои Material, неоморфизм ва дурахшро дар бар мегирад.

Кӯшиш кунед
◖

Тавлидкунандаи гӯшаи гирди CSS

Гӯшаҳои гирдро бо назорати мустақил бар ҳар гӯша визуалӣ тарҳрезӣ кунед. Синтаксиси эллипсии X/Y-ро барои шаклҳои органикии blob дастгирӣ мекунад.

Кӯшиш кунед

Саволҳои зуд-зуд додашаванда