- ตัวดำเนินการ
-
เรียนรู้
ศูนย์การเรียนรู้ Python ตัวอย่างที่รันได้, NumPy, pandas และอื่น ๆ ศูนย์การเรียนรู้ C และ C++ พอยน์เตอร์ หน่วยความจำ STL และ C++ สมัยใหม่ ศูนย์การเรียนรู้ C#พื้นฐาน C#, OOP, LINQ, async และแบบฝึกหัด .NET อัลกอริทึม Python การค้นหา การเรียงลำดับ รีเคอร์ชัน และภาพจำลอง O(n) อัลกอริทึม C และ C++ เปรียบเทียบการเขียนด้วย C และ C++
- โจทย์
CSS and design
CSS Flexbox Generator
Play with every flexbox property and see the layout change instantly, then copy the code.
- Runs in your browser
- Instant results
- Free, no sign-up
Loading the tool…
How to use the Flexbox Generator
- Set the container properties at the top.
- Click an item in the preview to change its own flex properties.
- Copy the generated CSS and HTML.
Frequently asked questions
What is the difference between justify-content and align-items?
justify-content places items along the main axis (the direction); align-items places them across it.
What does flex: 1 mean?
flex-grow: 1, flex-shrink: 1 and flex-basis: 0%, so items share the free space equally.
When should I use grid instead?
Use flexbox for one-dimensional rows or columns, and CSS grid when you need rows and columns at the same time.
ฝึก Python ด้วยโจทย์เขียนโค้ด
แก้โจทย์จริงใน editor นี้: รันทดสอบตัวอย่าง ส่งคำตอบ และรับรีวิวโค้ดจาก AI