LibraTool logoLibraTool

Акысыз CSS Flexbox генератору

Жандуу элементтерде flex багытын, оролушун, тегиздөөнү сынап көрүңүз — жана 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>

🔒 Баары браузериңизде иштелет — эч нерсе жүктөлбөйт.

Бул кантип иштейт

Интерактивдик flexbox ойногон аянт: flex-direction, wrap, justify-content жана align-items'ти которуштуруп, 10ко чейин тирүү элементтин дароо кайра жайгашышын көрүңүз. Каалаган элементти flex-grow: 1 берип, ал орун кантип талап кыларын көрүү үчүн басыңыз. CSS тирүү жаңыланат, долбооруңузга көчүрүүгө даяр.

  1. 1
    Контейнерди коюңуз
    Багыт, оролуу, justify-content, align-items, боштук.
  2. 2
    Элементтерди кошуңуз
    Бирден онго чейин номерленген flex элементтери.
  3. 3
    Эксперимент
    Flex-grow'ду которуштуруу жана эффектти көрүү үчүн элементти басыңыз.
  4. 4
    CSS'ти көчүрүңүз
    Контейнер (жана элемент) эрежелери, чаптоого даяр.

Баары браузериңизде иштейт — эч нерсе жүктөлбөйт.

Байланыштуу куралдар

🟦

CSS Grid генератору

CSS торду визуалдык түрдө түзүңүз — тректер, бирдиктер жана боштуктар — жана даяр CSS менен HTML кодун көчүрүп алыңыз.

Байкап көрүңүз
🎨

CSS Box Shadow генератору

Түз алдын ала көрүү, көп катмарлуу топтоо, түс тандагыч, ички белгилөө которгучу жана бир кликте көчүрүү менен CSS box-shadow үчүн визуалдык курулуш. Material, неоморфизм жана жаркыроо даярдалган варианттарын камтыйт.

Байкап көрүңүз
◖

CSS Border Radius генератору

Ар бир бурчту өзүнчө башкаруу менен тегеректелген бурчтарды визуалдык түрдө долбоорлоңуз. Органикалык формалар үчүн эллипстик X/Y синтаксисин колдойт.

Байкап көрүңүз

Көп берилүүчү суроолор