Rows with Flexbox · แถวด้วย Flexbox
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · หน้านี้ต้องใช้เบราว์เซอร์ล่าสุด (รองรับ SharedArrayBuffer) กรุณาอัปเดต Chrome, Edge, Firefox หรือ Safari เป็นเวอร์ชันล่าสุด
English
Putting boxes in a row
- By default, boxes stack downward. Often you want them side by side.
- Flexbox is the easy way to do that.
- Put
display: flex;on the container — the box that holds the others — and its children line up in a row.
ไทย
วางกล่องในแถว
- โดย default, กล่องจะ เรียงต่อกันลง; มักจะต้องการ让它们 อยู่ข้างกัน
- Flexbox เป็นวิธีง่ายสำหรับสิ่งนี้
- ใส่
display: flex;ลงบน container —也就是包含其他元素的盒子 — แล้วลูกหลานของมันจะเรียงตัวในแถว
English
Spacing them out
- Once a box is
display: flex;, you control how its children spread. justify-content: space-between;pushes them apart, with gaps between.gap: 12px;adds an even space between every child.
ไทย
จัดระยะห่างระหว่าง них
- เมื่อกล่องเป็น
display: flex;แล้ว, คุณควบคุม how children spread它们的方式 justify-content: space-between;ดัน它们在出, with gaps betweengap: 12px;เพิ่ม space之间 evenly สำหรับทุก child
<style>
.bar { display: flex; justify-content: space-between; }
.btn { background-color: #6c5; padding: 10px 16px; }
</style>
<div class="bar">
<span class="btn">Home</span>
<span class="btn">About</span>
<span class="btn">Contact</span>
</div>
English
Common mistakes
display: flexgoes on the container, not on the items.justify-contentspaces items along the row.
ไทย
ข้อผิดพลาดที่พบบ่อย
display: flexไปที่ container, ไม่ใช่ itemsjustify-contentจัดระยะห่างระหว่าง items ตามแถว
English
Now you try
display: flexgoes on the container, not the items.- Turn a box into a row, then spread its children out.
ไทย
ลองดูเลย
display: flexใช้กับ คอนเทนเนอร์ ไม่ใช่ไอเท็ม- เปลี่ยนกล่องให้เป็นแถว แล้วกระจาย children ของมันออก
Explore · สำรวจ
Flexbox lays out a row · Flexbox จัดเรียงแถว
justify-content spaces items along the row; align-items across it. · justify-content จัดระยะห่างระหว่างรายการตามแนว;align-items ตามแนวตั้ง
Put the three boxes side by side. Add display: flex; to the .row rule. · วางกล่องสามอันข้างกัน เพิ่ม display: flex; ในกฎ .row
Spread the boxes evenly across the row. Add justify-content: space-between; to the .row rule. · กระจายกล่องอย่างสม่ำเสมอตลอดแนว เพิ่ม justify-content: space-between; ในกฎ .row