រំលងទៅខ្លឹមសារមេ
LibraTool logoLibraTool

ម៉ាស៊ីនបង្កើត CSS Flexbox ឥតគិតថ្លៃ

សាលកម្មចម្រើនលម្អិត flex direction, 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 Grid

រចនា CSS grid ដោយមើលឃើញ — track ឯកតា និងគម្លាត — ហើយចម្លង CSS និង HTML ដែលបង្កើត។

សាកល្បង
🌈

កម្មវិធីបង្កើត CSS Gradient

បង្កើត CSS gradient លីនែ រ៉ាឌីស និង conic ជាមួយការមើលជាមុនផ្ទាល់។ ចម្លង CSS ដោយចុចម្ដង។

សាកល្បង
🎨

បង្កើតស្រមោលប្រអប់ CSS

Visual builder សម្រាប់ CSS box-shadow ជាមួយការមើលជាមុនផ្ទាល់ ការ stack layer ច្រើន color picker ការ toggle inset និងចម្លងម្ដង។ រួមបញ្ចូល preset Material, neumorphism, និង glow។

សាកល្បង

សំណួរដែលសួរជាញឹកញាប់