МОДУЛ 03 / LAYOUT СИСТЕМИ

Подреждане с CSS Flexbox

Научи как да подреждаш елементи в редове и колони, да управляваш разстоянията между тях и да създаваш гъвкави уеб интерфейси.

HTML & CSSИнтерактивен урок12. клас

01 / НАУЧИ

Какво е Flexbox?

CSS Flexbox е система за подреждане на елементи в една основна посока — хоризонтално или вертикално. Тя позволява лесно управление на подравняването, разстоянията и разпределението на свободното пространство.

.container {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

02 / РАЗГЛЕДАЙ

Flexbox Playground

Използвай контролите, за да променяш подреждането на елементите и да наблюдаваш генерирания CSS.

03 / ЕКСПЕРИМЕНТИРАЙ

CSS Flexbox Playground

Промени CSS свойствата и наблюдавай резултата в реално време.

justify-contentflex-directionalign-itemsgap: 12px

style.css

03 / ПРОМЕНИ

Експериментирай с Flexbox

Променяй flex-direction, justify-content, align-items и gap. Наблюдавай как се променя разположението на трите елемента.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<div class="flex-container">
  <div class="flex-item">01</div>
  <div class="flex-item">02</div>
  <div class="flex-item">03</div>
</div>

body {
  margin: 0;
  padding: 24px;
  font-family: Arial, sans-serif;
  background: #eef2f8;
}

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 220px;
  padding: 20px;
  background: #dbe5f2;
  border-radius: 12px;
}

.flex-item {
  padding: 24px;
  background: #d52f38;
  color: white;
  border-radius: 8px;
}

04 / СЪЗДАЙ

Създай навигация с Flexbox

Подреди навигационните връзки хоризонтално, с равномерно разпределение и подходящи разстояния.

Изисквания към задачата

Използвай display: flex.
Добави justify-content: space-between.
Подравни елементите с align-items: center.
Добави gap: 16px.
Използвай flex-wrap: wrap.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<nav class="site-nav">
  <a href="#home">Начало</a>
  <a href="#projects">Проекти</a>
  <a href="#about">За нас</a>
</nav>

body {
  margin: 0;
  padding: 24px;
  font-family: Arial, sans-serif;
  background: #eef2f8;
}

.site-nav {
  padding: 20px;
  background: #182235;
  border-radius: 12px;
}

.site-nav a {
  color: white;
  text-decoration: none;
  padding: 12px;
}

/*
  ЗАДАЧА:
  1. display: flex
  2. justify-content: space-between
  3. align-items: center
  4. gap: 16px
  5. flex-wrap: wrap
*/

Проектният редактор запазва промените локално и работи независимо от демонстрацията.

05 / ПРОВЕРИ

Провери петте Flexbox изисквания към навигацията.

Резултатите ще се появят тук след проверката.