Перайсці да асноўнага зместу
LibraTool logoLibraTool

Генератар CSS Flexbox — бясплатна

Эксперыментуйце з напрамкам flex, пераносам, justify і align пры жывых элементах — і скапіюйце 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
    Задайце кантэйнер
    Напрамак, wrap, justify-content, align-items, прамежак.
  2. 2
    Дадайце элементы
    Ад аднаго да дзесяці пранумараваных flex-элементаў.
  3. 3
    Эксперыментуйце
    Клікніце элемент, каб пераключыць flex-grow і ўбачыць эфект.
  4. 4
    Скапіруйце CSS
    Правілы кантэйнера (і элемента), гатовыя для ўстаўкі.

Усё працуе ў вашым браўзеры — нічога не загружаецца.

Звязаныя інструменты

🟦

Генератар CSS Grid

Візуальна праектуйце CSS grid — трэкі, адзінкі і промежкі — і капіюйце створаныя CSS і HTML.

Паспрабуйце
🌈

Генератар CSS-градыентаў

Стварайце лінейныя, радыяльныя і конусападобныя CSS-градыенты з жывым прагляданнем. Капіруйце CSS адным кліком.

Паспрабуйце
🎨

Генератар CSS Box Shadow

Візуальны канструктар для CSS box-shadow з жывым прагляданнем, шматслойным стэкаваннем, выбаральнікам колеру, пераключальнікам уставання і капіраваннем адным кліком. Уключае прэсеты Material, нейэмарфізму і свячэння.

Паспрабуйце

Часта задаюць пытанні