Үндсэн агуулга руу очих
LibraTool logoLibraTool

CSS flexbox үйлдвэрлэгч — үнэгүй

Flex чиглэл, wrap, 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 торны үүсгэгч

CSS торыг нүдээр загварчил — мөр, баганын нэгж болон зай — мөн үүссэн CSS ба HTML-ийг хуул.

Туршиж үзэх
🌈

CSS градиент үүсгэгч

Шууд урьдчилан харалттайгаар шугаман, радиаль, конус CSS градиентуудыг үүсгэх. Нэг товшилтоор CSS-г хуулах.

Туршиж үзэх
🎨

CSS хайрцгийн сүүдрийн үүсгэгч

Шууд урьдчилан харалт, олон давхаргын дамжуулалт, өнгө сонгогч, дотор тохируулах болон нэг товшилтоор хуулах бүхий CSS хайрцгийн сүүдэр барихад зориулсан харааны барилгач. Material, ноеморфизм болон гялбааны урьдчилан тохируулгуудыг агуулна.

Туршиж үзэх

Түгээмэл асуултууд