Негізгі мазмұнға өту
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>

🔒 Барлығы браузеріңізде орындалады — ештеңе жүктелмейді.

Қалай жұмыс істейді

Интерактивті 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 торы генераторы

CSS торын визуалды түрде құрастырыңыз — трекілер, бірліктер және аралықтар — және құрастырылған CSS және HTML-ді көшіріңіз.

Байқап көріңіз
🌈

CSS градиент генераторы

Тірі алдын ала қараумен сызықтық, радиалдық және конустық CSS градиенттер жасаңыз. CSS-ті бір рет басу арқылы көшіріңіз.

Байқап көріңіз
🎨

CSS box-shadow генераторы

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

Байқап көріңіз

Жиі қойылатын сұрақтар